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

属性セレクタ

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

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

パンくずリスト

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

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

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

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

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

複数背景画像

#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

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

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

「続きを読む」の ...

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

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

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

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

グラデーション

多いので省略

参考

• 国旗
  http://www.standardista.com/CSS3gradients/flags.html
• 壁紙
  http://lea.verou.me/css3patterns/

Flexboxの各アイテムの扱い

親要素

.wrapper{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

各Flexアイテムの整列基準を変更

.box:nth-child(1) {
  align-self: flex-end;
}

各Flexアイテムの順番を変更

.box:nth-child(2) {
  order: 1;
}

IE9にも対応させたいと言われたら、polyfill必須。
とはいえflexibility.jsが使えないことがあったので、IE10以降でないとデバッグ大変になるかも。。
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！

参考
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疑似クラス」を使ったスタイルシートのテクニックと注意点

animation-play-state

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

animation-fill-mode

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

複数アニメーション指定

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

3D表現

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

共通の3D空間

#parent1{
  perspective: 300px;
  .child{
    transform: rotateY(45deg);
  }
}

別々の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;を指定

孫要素にも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

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

calc()関数を使用する

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

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

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

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

font-feature-settings

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング
文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました