【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用 */ 

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

例：

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

よくわかるHTML5+CSS3の教科書

posted with カエレバ

大藤 幹 マイナビ 2012-07-28

Amazonで見る

楽天市場で見る