CSS3 text-shadow box-shadow の使い方

テキストやボックス要素に影をつける box-shadow text-shadow の使い方

テキストに影をつける text-shadow ボックス要素に影をつける box-shadow は今後必須のプロパティになりそうな気がするので使い方などをまとめておきたいと思います。

…ここからが続き

text-shadow の使い方

名前の通りテキストに影をつけてくれるプロパティです。
デザインをする際ドロップシャドウを使う事は多々あると思うですが、それが CSS で出来ると思ってくれたら良いかと思います。

指定方法

text-shadow: 1px 1px 3px #000;

text-shadow: 1px 1px 3px #000;

カンマ「,」区切りで複数指定ができます。

text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;

demo page

box-shadow の使い方

名前の通りボックスに影をつけてくれるプロパティです。
デザインをする際ドロップシャドウやグロー(光彩)を使う事は多々あると思うですが、それが CSS で出来ると思ってくれたら良いかと思います。

指定方法

box-shadow: 1px 1px 3px #000;

-moz-box-shadow: 1px 1px 3px #000; /* Firefox用 */
-webkit-box-shadow: 1px 1px 3px #000; /* Safari,Google Chrome用 */

カンマ「,」区切りで複数指定ができます。

-moz-box-shadow: 0 0 4px #F00, 0 0 12px #000, 5px 5px 5px #000;
-webkit-box-shadow: 0 0 4px #F00, 0 0 12px #000, 5px 5px 5px #000;

demo page

IE にも適応させた場合

IEでCSS3のドロップシャドウを使いたいを参考にして下さい。

Comments

ダニエル

ダニエル

とても分かりやすい説明です。
ちなみに上記の事例はFirefoxとWebKitのみですが、プレフィックス無しのプロパティ名(「box-shadow」、「text-shadow」)を追加していただければ、OperaやIEなどでも使えます。
よろしくお願いいたします。

2011年08月18日 15:23