文字にドロップシャドウの効果をつける--FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-08-29 20:10:02
CSS 3で復活を果たした文字に影をつけるプロパティ「text-shadow」。今回はFirefox 3.1が対応したbox-shadowプロパティと合わせて解説してみたい。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

ボックスに影をつけて表示する

　文字ではなくボックスに影をつけて表示したい場合は、本連載の「ボックスにドロップシャドウの効果をつける」で紹介したbox-shadowプロパティを利用する。

　これまではSafariが-webkit-box-shadowとしてサポートしているだけだったが、Firefox 3.1（アルファ版）では-moz-box-shadowとしてサポートした。

　たとえば、「ボックスを重ねて表示した場合」で紹介したサンプルに-moz-box-shadowの設定を追加すると、Firefoxでもボックスに影をつけて表示することができる。

Firefox 3.1（アルファ版）での表示 Firefox 3.1（アルファ版）での表示
Safari 3での表示 Safari 3での表示 
div#text01{
background-color: #ffff00;
-moz-box-shadow: 20px 20px 20px #224466;
-webkit-box-shadow: 20px 20px 20px #224466;
margin-left: 150px;
}

div#text02{
background-color: #ffaa00;
-moz-box-shadow: 20px 20px 20px gray;
-webkit-box-shadow: 20px 20px 20px gray;
margin-top: -50px;
}

HELLO



こんにちは
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ