制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！

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で出来る表現の幅が一気に広がります。ぜひ積極的に使っていきましょう。