text-shadowプロパティによる装飾サンプル

テキストに対しての装飾を考えるとき、わざわざPhotoShopなどで画像を作らなくても、CSS3の「text-shadowプロパティ」の指定で、ドロップシャドウや光彩などの、基本的なエフェクト効果を実現することが出来ます。

それらの指定方法を覚えてしまえば簡単ですが、私自身なかなか覚えられないので、汎用性の高いものをいくつかまとめていつでもコピペで使えるようにしておくことにします。そのまま使っても良し、多少のカスタマイズするも良し活用してみてください。

それではいくつか見ていきましょう。

 

 

1.ドロップシャドウ

text-color「#FFF」、text-shadow「0px 2px 5px #666」というにボカシ「5px」として自然なドロップシャドウを表現しています。

 

2.エンボス

text-color「#CCC」、text-shadow「-1px -1px 1px #fff」「1px 1px 1px #666」というように、左上にボカシ「1px」の白と右下にボカシ「1px」のグレーを指定することで、テキストが盛り上がったようなエンボス表現を実現しています。

 

3.プレス

text-color「#dadada」、text-shadow「-1px -1px 1px #333」「1px 1px 1px #fff」というように、左上にボカシ「1px」のグレーと右下に「1px」の白を指定することで、紙に版を押したようなプレス凹みを表現しています。

 

4.ボカシ

text-color「透明」、text-shadow「0 0 12px #666」というように、ボカシ「12px」のグレーを指定することでうっすらとボケているような画像になります。

 

5.縁どり

text-color「#aaa」、text-shadowを上下左右にボカシ「1px」のグレーを指定することで、縁どりを入れたような表現になります。

 

6.外光彩

text-color「#FFF」、text-shadowをボカシ「10px」と少し大きめに白で入れることで、外側が光っているような表現になります。

 

7.3D

text-color「#FFF」、text-shadowをボカシなしでY軸方向の下に「1px」ずつずらして明るいグレー「#EEE」から暗めのグレー「#444」に9段階で指定しています。そして一番下の10段階目のみボカシ「8px」の黒を入れることで自然なドロップシャドウも表現しています。

 

以上7種類のエフェクト表現になります。