CSS3実用的コードまとめ

カラムレイアウト「display:box」

すべてのボックスの高さを揃えるということがとても容易にできるようになりました。
CSS3 のボックス要素で 3 カラムレイアウトを作るのに必要なのは、極端に言えば "display: box; と指定するだけ" です。
そうすると、中に内包されている div※が勝手に横並びになり、かつ一番長い div に追従して（つまり "display: box;" と指定した親要素の高さに追従して）高さが揃います。
※正確にはブロック要素に対して、です。なので、div でなくても p でも同様の結果になります。

ボックスの表示順序を制御する「box-ordinal-group」

box-ordinal-group:1;と指定すれば、ボックス要素内でどこに書かれていても一番左側に表示されます。

段組み「column-count」

従来の段組はfloatやpositionを利用して行っていましたが、このプロパティが導入されると、段組レイアウトがぐっと楽になります。

column-count: 3[段数];
column-width: 200px[幅];
column-gap: 50px[段組の間隔];
column-rule: 5px[段組間のボーダーサイズ] dotted[段組間のボーダースタイル] #333[段組間のボーダー色];

角丸やグラデーションを組み合わせたボタン

• CSSで押し心地のいいボタン　http://jsdo.it/grfxdsgn/nCa2
• CSS Only Download Button　http://jsdo.it/tetsuwo/bK1Q

border-radius: 10px[角丸の半径]; ←角丸
background: linear-gradient(top[方向], #990[開始色], #066[終了色]); ←線形グラデーション
background: radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色); ←円形グラデーション
text-shadow: 1px[横方向のずれ] 1px[下方向のずれ] 3px[ぼかし具合] #333[影の色]; ←テキストに影

CSS3をつかったUIパターン

• リングメニューをCSSで実装してみる　http://jsdo.it/edo_m18/9Whu
• CSSだけでDropDownMenu！　http://jsdo.it/calmbooks/qvhT
• CSS3 タブ　http://jsdo.it/rus/kYf6

transform: rotate(deg)[回転] scale(xy[x,y])[拡大・縮小] skew(deg)[X軸,Y軸へのゆがみ translate(xy[x,y])[移動]; ←要素の2D変形、3D変形
transition: background-color[どの要素を変化させるか] 1s[変化をどれくらいで表現するか] linear[変化の具合]; ←時間的変化

要素ごとの変更が容易に「:nth-child」

li:nth-child(even){background-color: blue;} [偶数（even）番目のリスト背景を青に]
li:nth-child(5){background-color: blue;} [5番目のリスト背景を青に]
li:nth-child(4n+1){background-color: blue;} [4n+1番目のリスト背景を青に]
li:nth-last-child(2){background-color: blue;} [最後から2番目のリスト背景を青に]
li:nth-child(-n+5){background-color: blue;} [5番目までのリスト背景を青に]

要素の透過度を指定「opacity」

透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。この範囲からはみ出した値を指定しても範囲内に収められます。
透明効果をオブジェクト全体ではなく、背景色やボーダー色に個別に適用したい場合には、rgba()で指定することができます。

opacity: 0.9[透過度を90%に];