text-shadowで文字を立体的に、または陥没させる

記事内にプロモーションを含む場合があります。

textshadownorei.webp

(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 ;

text-shadowプロパティ