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

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

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

コーディング・WordPress化作業を代行します

ボックスシャドウ

ボックスシャドウは
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のようにボックスにシャドウをつけるスタイルシート
のサイト様に書かれているので参考にしてみてください。

コーディング・WordPress化作業を代行します

CSSのおすすめ参考書

楽天ブックス
¥2,838 (2024/04/13 07:28時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場

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 アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事