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

エ・ビスコム・テック・ラボ
2008-08-29 20:10:02
  • このエントリーをはてなブックマークに追加

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

 文字ではなくボックスに影をつけて表示したい場合は、本連載の「ボックスにドロップシャドウの効果をつける」で紹介した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
こんにちは
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]