text-shadow box-shadowの使い方

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

text-shadowの使用例

text-shadowの使いどころは、スマートフォン向けサイトの文字装飾が多いのではないでしょうか。例えば、立体的なボタンの窪んだテキストなど。
各数値の指定は左から、『横方向(右)のズレ』、『縦方向(下)のズレ』、『ぼかし』、『影の色』となります。
複数指定、マイナス方向(左方向・上方向)も可能です。
※古いバージョンのIEではtext-shadowを解釈ないことがあります。

CSS

text-shadow:1px 1px 3px #000;
テキストに影が付きます

影の色は、rgba(数値) でも指定可能です。

影の色を、rgba(0,0,0,0.4) で指定しています

box-shadowの使用例

box-shadowの使いどころは、ボタンリンクやコンテンツブロックのふちなどで使用することが多いと思います。
各数値の指定はtext-shadow同様、左から、『横方向(右)のズレ』、『縦方向(下)のズレ』、『ぼかし』、『影の色』となります。(下記サンプルの影の色を指定している『rgba()』は、R=赤、G=緑、B=青、A=透過度、という意味で、『0,0,0』は黒色を示し、『0.5』は透過度50%を指します)

複数指定、マイナス方向(左方向・上方向)も可能です。
ベンダープレフィックス(-moz-,-webkit-)はなくてもいいようですが、気になるなら付けてください。


box-shadow:1px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.5);  /* Firefox用 */
-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.5);  /* Google Chrome,Safari用 */
ボックスに影が付きます