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

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

オフセット

 最初の2つの長さの値は横方向と縦方向のオフセットで、文字からの距離で影の表示位置を設定する。マイナスの値を指定することも可能で、次のように指定すると影を文字の左下に表示することができる。なお、オフセットの設定は省略することができない。

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

ぼかしの半径

 ぼかしの半径はオフセットに続けて3つ目の値として指定する。たとえば、ぼかしの半径を20ピクセルに設定すると次のようになる。半径を大きくするほどぼかしは強くなる。

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

 ぼかしの半径の指定はオプションで、省略することも可能だ。省略した場合、半径は「0」として処理することになっており、ぼかしのない影が表示される。

Firefox 3.1(アルファ版)での表示。Opera 9.5、Safariでも同じように表示される Firefox 3.1(アルファ版)での表示。Opera 9.5、Safariでも同じように表示される
div{
text-shadow: 5px 5px gray;
color: navy;
font-size: 50px;
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]