(text-shadowを使用した例)
フォントの上下左右に影を作って、立体感や陥没を作り出すCSSプロパティ「text-shadow」。
昔はダサめのサイトでしか使われていなかったのに、ここ最近は、デザインに凝ったセンスの良いサイトでは必ずといって良いほど使われるようになりました。
いきなりtext-shadowを見掛けるようになった理由としては、ぼかしが値が指定できるようになった事、IE以外のブラウザ(Firefox, Google Chrome, Safari, Opera)でサポートされた事、マシンパワーの飛躍的な向上とブログの普及に伴って、重いサイトへの耐性が出来た事などが考えられますが、ただ単に「流行」というのもあるでしょう。
どちらにしても、今が使い時なのは確かです。
text-shadow: Xpx Ypx Zpx #000 ;
- X=左右の陰影。プラスで右、マイナスで左方向へ。
- Y=上下の陰影。プラスで下、マイナスで上方向へ。
- Z=ぼかしの大きさ。
値は何がよいのか分からないという人は、まずは、全て1pxでやってみて、値を変更しつつ自分のサイトに合わせるのが良いでしょう。このプロパティは、特に平面で単一なカラーの背景よりも、グラデーションやグラフィカルな背景で使うとより効果的です。
text-shadow: 1px 1px 2px #999 ;
text-shadowプロパティ
text-shadow: 0px 1px 1px #fff ;
text-shadowプロパティ
text-shadow: 0px 0px 2px #000 ;