CSS3のプロパティについて解説する連載です。以前の記事でボックス要素に影をつけるbox-shadowの解説をしましたが、今回はテキストに影をつけるtext-shadowついてご紹介します。
text-shadowの指定方法
text-shadowを指定する方法です。
text-shadow: 水平方向の距離 垂直方向の距離 （影のぼかし半径） （影の色）;
「水平方向の距離」と「垂直方向の距離」はそれぞれ、水平方向と垂直方向へのずれを指定します。「水平方向の距離」は正の値で右に、負の値で左にオフセットします。「垂直方向の距離」は正の値で下に、負の値で上にオフセットします。
「影のぼかし半径」と「影の色」は、それぞれ省略が可能です。
text-shadowの具体例
text-shadowを使った具体例です。
右下に影を表現する（「影のぼかし半径」は1px）
「水平方向の距離」と「垂直方向の距離」を両方とも正の値にして、テキストの右下に影を描いた例です。
text-shadow: 10px 10px 1px #ccc;
右下に影を表現する（「影のぼかし半径」は7px）
上と同じ内容で、「影のぼかし半径」を1pxから7pxに変更した場合です。影のぼやけ具合が強くなったことがわかります。
text-shadow: 10px 10px 7px #ccc;
影を2つにした場合
半角カンマで区切ることで、2つ以上の影を描くことができます。下の例では、右下と左上に色の違う影を2つ指定しています。
text-shadow: 10px 10px 1px #ccc, -10px -10px 1px #7fd;
エンボスを表現した場合
影を組み合わせることで、エンボスやレタープレス、グローエフェクトなどさまざまな装飾をかけることが可能です。下の例では、エンボス加工を表現しています。
text-shadow:1px 1px 1px #000, -1px -1px 1px #fff;
あとがき
CSS3のtext-shadowプロパティを使って、文字に影をつける方法についてご紹介しました。box-shadowと同様、CSSで出来る表現の幅が一気に広がります。ぜひ積極的に使っていきましょう。