【css3】文字やボックスに影を付ける方法

【css3】文字やボックスに影を付ける方法

2014年3月10日
HTML・CSS
スポンサーリンク

CSS3

css3を使えば文字やボックスに影を簡単に付けることができます。
通常はPhotoShopで影の加工をしてそれを使用しますが、cssでできるのであればサイトが自由に作れますし、更新の手間が省けます。

まず文字の影の付け方です。

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

プロパティの順に「横方向のズレ」「下方向のズレ」「ぼかしの幅」です。

例:

例の文章です。

次にボックスの影の付け方です。

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

プロパティの順に「横方向のズレ」「下方向のズレ」「ぼかしの幅」です。

例:

例のボックスです。

簡単に導入できました!!