0

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

text-shadow-tit

テキストに対しての装飾を考えるとき、わざわざ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

3D

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

 

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


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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