テキストに影を付けるtext-shadowプロパティですが、少し前まではSafariのみが対応していて、マックオタのサイトオーナー以外にはあまり使われる事はありませんでした。けどFirefox 3.5とOpera 9.5がCSS3での表現に一部対応したことで最近じゃチラホラ見るようになり、テキストで表現するタイポグラフィーのツールとしても使われる機会が多くなったような機がします。というわけでText-Shadowプロパティを使った、CSS3による指定方法を個人的にまとめてみました。

ソースのダウンロード

text-shadow、基本的な指定の仕方

Safari向けに過去にtext-shadowを使ってきた人ならすでにご存じ、今まで通りのシャドウの付け方です。一般的な黒い影を落としたイメージになります。X軸の移動は右方向に、Y軸の移動は下方向に向かいます。つまり左や上方向に影を付けたい場合は、それぞれマイナス指定をしてやればオッケー。

text-shadow: X軸の移動距離 Y軸の移動距離 ぼかしの半径 シャドウの色
例）text-shadow:2px 2px 3px #000;

作例

複数の影の指定

影の指定をカンマで区切って複数指定する事で、同時に2種類以上の影を描画する事ができます。ちょっとコツさえつかめば、炎のようなエフェクトやエンボスのような見せ方もできます。

text-shadow: X軸の距離 Y軸の距離 ぼかしの半径 #色, X軸の距離 Y軸の距離 ぼかしの半径 #色;
例）text-shadow: 10px 10px #f39800, 40px 35px #fff100, 70px 60px #c0ff00;

作例

新しい色指定の方法、RGBA

CSS3では、今までの#始まりの色指定法に加えて、RGBでの色指定が行えます。例えば今まで#000で表現していた黒を、rgb(0,0,0)と表記することができます。これに加えてアルファ（透明度）についてもコントロールできるようになり、その場合はrgba(0,0,0,1)といった感じで黒を描画できます。最後の1が透明度100%を示し、これを0.5にすれば50%になるという仕組み。text-shadowにもこの方法で色指定ができるので、今までできなかった影の部分の透明度を指定することができます。

text-shadow: X軸の距離 Y軸の距離 ぼかしの半径 rgba(赤,緑,青,透明度);
例）text-shadow: 0 -1px 1px rgba(0,0,0,0.5);

作例

注意が必要なのはカンマとドットの違い。アルファ部分に小数点を使うと、パっと見5つの指定がされているように見えます。見間違いに注意。

CSS 3の角丸描画と組み合わせたボタン制作

CSS 3ではtext-shadow以外にも色々と制作する上で便利な機能が追加されてます。それら新機能のひとつ、ボックス要素の角を丸くする機能を併用したボタンを、Super Awesome Buttons with CSS3 and RGBAを参考に作ってみました。


.r-button, .r-button:visited {
background: #630030 repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #EEE;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
position: relative;
cursor: pointer;
text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 -1px 1px rgba(0,0,0,0.8);
font-size: 16px;
font-weight: bold;
line-height: 150%;
}
.r-button:hover {
background-color: #430010;
color: #fff;
}
.r-button:active {
top: 1px;
}

作例

ボックスのシャドウをRGBA方式でシャドウを付ける場合、下地となる背景色を気にしなくていいのが利点。白だろうが黒だろうがテクスチャだろうが、アルファ値が活きてるのでちゃんとそれっぽくシャドウを落としてくれます。

参考記事