KH-WEBLOG TOP > WEBメモ > CSS > CSSでドロップシャドウをつける

CSSでドロップシャドウをつける

今回はCSSでドロップシャドウ(影)をつける方法をメモ
CSSでシャドウをつける方法は
1.ボックス要素にドロップシャドウ
2.テキストにドロップシャドウ
の2種類あります。

ボックスシャドウ

ボックスシャドウは
box-shadow: 横のズレ 縦のズレ ぼかし シャドウの色;
と記述し、具体的には

box-shadow: 1px 1px 5px #333;
-moz-box-shadow: 1px 1px 5px #333; /* Firefox用*/
-webkit-box-shadow: 1px 1px 5px #333; /* Google Chrome, Safari用*/

のように記述します。
また、複数指定する場合は

box-shadow: 1px 1px 5px #333, -1px -1px 5px #333;

のように,(カンマ)で区切ります。

テキストシャドウ

テキストシャドウをつける場合は
text-shadow: 横のズレ 縦のズレ ぼかし シャドウの色;
と記述し、具体的には

text-shadow: 1px 1px 5px #333;
-moz-text-shadow: 1px 1px 5px #333; /* Firefox用*/
-webkit-text-shadow: 1px 1px 5px #333; /* Google Chrome, Safari用*/

と記述します。
テキストシャドウもボックスシャドウと同じく
複数指定する場合は,(カンマ)で区切ります。

※注意点としてこれらのプロパティはCSS3に非対応のIE6~8では表示されません。

もしIE6~8でも表示させたい場合は
> [CSS]IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート
のサイト様に書かれているので参考にしてみてください。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事