cssのtext-shadowとbox-shadow
2012年01月25日 20:31:42
テーマ:追加HTML&CSS
cssのtext-shadowとbox-shadowを加えてみました。
最近のページ作成(メインカラムのみ)をした案件で、こういうのがありました。テキストに変なぼかしが入ってんな・・・って思ってたけど、CSS3のtext-shadowが入ってたんですね。
よく見るとタウンネットブログの<h2>にも入ってました。勿論、テキストに。
・・ってことで、このブログタイトルのオンマウスロールオーバーと右カラムに加えてみました。
.blog_title a:hover{
color:#fcfcfc;
text-decoration:none;
text-shadow:0px 0px 10px #f6f;
}
文字通りテキストの影。ドロップシャドウみたいな感じ。
値は、横方向[px]・下方向[px]・ぼかし具合[px]・色
下方向っていうより縦方向ですね。プラスの値を入力すると右方向や下方向に、マイナスの値は左方向や上方向に影が掛かるようです。
.side{
-moz-box-shadow: 5px 5px 10px #999;/*Firefox*/
-webkit-box-shadow: 5px 5px 10px #999;/*Safari, Google Chrome*/
}
文字通りボックスの影。値は上記同様。
ちなみにIEでは他のやり方があるようで、IE8では表示されていませんでした。だからIEで当ブログタイトルをポイントすると文字色がかなり薄いです( ̄▽ ̄;)
FirefoxとGoogle Chromeでは表示確認OK。