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

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

影の色

 影の色の指定はオフセットとぼかしの設定の前か後ろに記述する。たとえば、次のサンプルは影の色の指定を一番最初に記述したものだ。影の色はオレンジ色に指定している。

Firefox 3.1(アルファ版)での表示。Opera 9.5、Safariでも同じように表示される Firefox 3.1(アルファ版)での表示。Opera 9.5、Safariでも同じように表示される
div{
text-shadow: orange 5px 5px 5px;
color: darkred;
font-size: 50px;
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif;
}
ブラウザで表示を確認する

 また、影の色の指定はオプションとなっており、省略することが可能だ。省略した場合、CSS 2ではcolorプロパティで指定した文字の色を、CSS 3ではブラウザが選択した色を使用すると規定されている。

 実際に影の色の指定を省略してみると、Firefox 3.1(アルファ版)やOpera 9.5では文字と同じ赤色の影が表示される。しかし、Safariは省略に未対応で、影が表示されなくなってしまう。

Firefox 3.1(アルファ版)での表示。Opera 9.5でも同じように表示される Firefox 3.1(アルファ版)での表示。Opera 9.5でも同じように表示される
div{
text-shadow: 5px 5px 5px;
color: navy;
font-size: 50px;
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif;
}
ブラウザで表示を確認する

複数の影の表示

 text-shadowプロパティでは複数の影を表示することもできる。その場合、複数の影の設定を「,(カンマ)」で区切って記述する。ただし、複数の影の表示にはFirefox 3.1(アルファ版)とOpera 9.5は対応しているが、Safariは対応していない。

 たとえば、次のサンプルでは赤色の文字に対して、オレンジ色、黄色、緑色の順に3つの影の設定を記述している。3つの影の表示位置は、オレンジ色、黄色、緑色の順に文字から遠くなるように指定した。

div{
text-shadow: 10px 10px #f39800, 40px 35px #fff100, 70px 60px #c0ff00;
color: darkred;
font-size: 50px;
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif;
}
ブラウザで表示を確認する

 これをFirefox 3.1(アルファ版)とOpera 9.5で表示すると次のようになる。Firefox 3.1(アルファ版)ではオレンジ色の影が一番上に、緑色の影が一番下に重なって表示される。しかし、Operaでは逆順に重なって表示されることがわかる。

Firefox 3.1(アルファ版)での表示 Firefox 3.1(アルファ版)での表示
Opera 9.5での表示 Opera 9.5での表示

 影の重なりの順番は、CSS 2ではOperaのように後から設定を記述した影が上に重なることになっている。一方、CSS 3ではCSS 2の規定を引き継いでいるものの、Firefoxのように先に設定を記述した影が上に重なるべきではないかとの提案も行われている。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]