CSS3

CSS3によるボタン

最近流行りのフラットデザインではなく、立体的なボタンのサンプルです。
フラットデザインではボタンからグラデーションや影を排除し、明確にリンクとわかるアイコン(>等)を加えることをしますが、今回はグラデーション影(box-shadow)を利用しました。

続きを読む

古いIE(6~9)にCSS3を対応させる

サポートの切れたWindowsOSの標準ブラウザを無視し、モダンブラウザを対象にCSS3を記述するのであれば、下記の対応はいらないと思います。(2016年9月現在)
古いIEに対応する必要がある方は参考にしてみてください。

– – – – – – – – – – – –

古いIE(Internet Explorer 6~9)でもCSS3のプロパティを反映させようと思った場合、『CSS3 PIE』というものを使います。
今のところ対応しているプロパティは少ない(角丸、グラデーション、ボックスの影など)ですが、使えないよりマシと思えば利用してみるのもいいと思います。

続きを読む

text-shadow box-shadowの使い方

テキストやボックスを立体的に見せるスタイルシートの説明です。
text-shadowはテキストに、box-shadowはボックスに影を付けます。(そのままです)

続きを読む

gradient(グラデーション)の使用例

グラデーションを指定するgradientの使用例と説明です。
background に指定することでボックスの背景に線形グラデーションを表現できます。
使用にはベンダープレフィックス(-moz-,-webkit-)を付ける方法が一般的のようです。

続きを読む