表やリストを見やすくするため、一行ごとに背景色をつける方法です。
擬似クラス(:nth-child)で設定するのでclass等を使用しなくてもよい(htmlを書き換えなくてもよい)ところがメリットです。
CSS3
CSS3によるボタン
最近流行りのフラットデザインではなく、立体的なボタンのサンプルです。
フラットデザインではボタンからグラデーションや影を排除し、明確にリンクとわかるアイコン(>等)を加えることをしますが、今回はグラデーション影(box-shadow)を利用しました。
古いIE(6~9)にCSS3を対応させる
サポートの切れたWindowsOSの標準ブラウザを無視し、モダンブラウザを対象にCSS3を記述するのであれば、下記の対応はいらないと思います。(2016年9月現在)
古いIEに対応する必要がある方は参考にしてみてください。
※2022 年 6 月 16 日(日本時間)までに、Internet Explorer のサポートが終了しました。
今後どこかの時点で、IE を起動しようとすると Microsoft Edge が起動するよう変更されるようですので、以下の内容は参考までに。
text-shadow box-shadowの使い方
テキストやボックスを立体的に見せるスタイルシートの説明です。
text-shadowはテキストに、box-shadowはボックスに影を付けます。(そのままです)
gradient(グラデーション)の使用例
グラデーションを指定するgradientの使用例と説明です。
background に指定することでボックスの背景に線形グラデーションを表現できます。
ベンダープレフィックス(-moz-,-webkit-)を付け古いバージョンのブラウザ対策はもういらないかもしれません。
一応、下記サンプルはベンダープレフィックス付きで。