【メモ】個人的に見落としていたCSSの使い方



## 属性セレクタ

http://codepen.io/mo4_9/pen/PGJRNb

複数の条件で絞り込む
`^=` 前方一致
`$=` 後方一致

```css
a[href^='http'][href$='co.jp/'][target='_blank']{
  font-size: 2rem;
}
```

## パンくずリスト

http://codepen.io/mo4_9/pen/pEWLWk

`:nth-child(n+2)` 最初のli要素以外を選択

```css
li:nth-child(n+2)::before{
  content:'>';
  margin: 0 10px;
}
```

## 文章の1文字目だけ大きくする

https://codepen.io/mo4_9/pen/xdPLgz

`float: left;`で２文字目以降を上寄せにし、
line-heightとpaddingで隙間を調整

```css
.lead::first-letter{
  font-weight: bold;
  font-size: 48px;
  line-height: 14px;
  padding:  20px 10px 0 0;
  float: left;
}
```

## 複数背景画像

http://codepen.io/mo4_9/pen/ORxBjJ

```css
#box{
  width: 640px;
  height: 360px;
  background: 
    url("http://placeimg.com/320/180/people") no-repeat top center,
    url("http://placeimg.com/320/180/animal") no-repeat left bottom,
    url("http://placehold.jp/640x360.png") no-repeat center;
  background-size: auto 30%, auto 20%, cover;
}
```

## background-clip

http://codepen.io/mo4_9/pen/rrGqkG

背景画像とborderやpaddingの兼ね合いも考慮する

```css
#box{
  border: solid 30px rgba(200,100,0,0.5);
  background-clip: border-box;
  background-origin: border-box;
}
```

## 「続きを読む」の ...

http://codepen.io/mo4_9/pen/gwGkWz

```css
.item1{
  width: 500px;
  white-space: nowrap; // 改行させない
  overflow: hidden;
  text-overflow: ellipsis; // ...
}
```

> 参考
http://www.htmq.com/css3/background-clip.shtml


## 背景画像はそのまま、テキストの不透明度だけ下げたい

http://codepen.io/mo4_9/pen/xEXmYg

`opacity`を使うと、背景画像の不透明度まで下がってしまう。
`color: rgba(255,0,0,0.5);`のようにする

## グラデーション

http://codepen.io/mo4_9/pen/VKrqEQ

多いので省略

> 参考
- 国旗
http://www.standardista.com/CSS3gradients/flags.html
- 壁紙
http://lea.verou.me/css3patterns/


## Flexboxの各アイテムの扱い

http://codepen.io/mo4_9/pen/amLXra

```css:親要素
.wrapper{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}
```

```css:各Flexアイテムの整列基準を変更
.box:nth-child(1) {
  align-self: flex-end;
}
```

```css:各Flexアイテムの順番を変更
.box:nth-child(2) {
  order: 1;
}
```

IE9にも対応させたいと言われたら、polyfill必須。
とはいえflexibility.jsが使えないことがあったので、IE10以降でないとデバッグ大変になるかも。。
[IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！](http://www.webcreatorbox.com/tech/ie8-flexbox/)

> 参考
http://css3.my-learn.net/example/flex_3column2.php
http://css3.my-learn.net/example/flex_navi.php
http://css3.my-learn.net/example/flex_grid.php


## :target擬似クラス

[[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点](http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html)

## animation-play-state

http://codepen.io/mo4_9/pen/VKydYr

アニメーションの再生`running`と一時停止`paused`

## animation-fill-mode

http://codepen.io/mo4_9/pen/VKydKy

アニメーションが終了したときのスタイルを適応する
デフォルトだとアニメーション終了時に、初期のスタイルに戻ってしまう
`animation-fill-mode: forwards;`

## 複数アニメーション指定

http://codepen.io/mo4_9/pen/RGxJpJ

```css
#box{
  animation: 
    width_change 2s forwards,
    color_change 1s forwards;
}
```

## 3D表現

http://codepen.io/mo4_9/pen/kkELzr

**perspectiveプロパティ**は親要素に指定
**perspective関数**は3Dにしたい要素（子要素）に指定

```css:共通の3D空間
#parent1{
  perspective: 300px;
  .child{
    transform: rotateY(45deg);
  }
}
```

```css:別々の3D空間
#parent2{
  .child1{
    transform: perspective(300px) rotateY(45deg);
  }
  .child2{
    transform: perspective(300px) rotateY(60deg);
  }
  .child3{
    transform: perspective(300px) rotateY(75deg);
  }
}
```

孫要素にも親要素の3D空間を継承させたい場合は、
子要素に`transform-style: preserve-3d;`を指定

```css:孫要素にも3D空間を共有する
#parent3{
  perspective: 300px;
  .child{
    transform: rotateY(15deg);
  }
  .child1,
  .child2,
  .child3,
  .child4{
    transform-style: preserve-3d;
  }
}
```


カードめくりとか、キューブなどの基本表現は以下のサイトに載っている。
http://desandro.github.io/3dtransforms/
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html


## 単位が違う要素同士の計算をしたい

http://codepen.io/mo4_9/pen/PGRWxo

calc()関数を使用する

```css
#box {
  font-size: calc(2rem + 2px);
  width: calc(100% - 100px);
}
```

## borderやpaddingでwidthを増やしたくない

http://codepen.io/mo4_9/pen/ALyOwV

`box-sizing: border-box;`と指定すればborderやpaddingを内包してくれる
（＝widthが変わらずキープできる！）

## カーニングのモダンな設定

[font-feature-settings](https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings)


[文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング](https://ics.media/entry/14087)
[文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました](https://www.bricoleur.co.jp/blog/archives/3588)