CSS3でドロップシャドウ(影)を付ける

CSS3から文字や画像にドロップシャドウが付けれるようになりましたね。
今まで画像加工でしていた事が、CSSだけで実現出来るという事で、今後も使って行きそうな予感なので、メモ!

※このブログの画像も影を付けていますが、画像加工ではなく、CSSで影を付けています。

まずはこのCSSを適用するとどんな感じになるのかを画像で。

shadow_image
今回使っているCSSはこんな感じです。

.shadow{
	-moz-box-shadow: 2px 2px 3px 3px #CCC;
	-webkit-box-shadow: 2px 2px 3px 3px #CCC;
	box-shadow: 2px 2px 3px 3px #CCC;
	background-color: #EEE;
	padding: 10px;
	margin: 20px;
}

CSS解説

最初の3行は同じプロパティが入っていますね。
あれ?何で?と思って調べてみた所・・・・

1行目の”-moz”はMozillaが定めた独自のCSS。(FireFox用)
2行目の”-webkit”はAppleが定めた独自のCSS。(safari用)
そして3行目の”box-shadow”がCSS3で定められたドロップシャドウという事。

“box-shadow”が今後正しいCSS3として普及していくそうですが、しかし現段階ではまだcss3は過渡期で、CSS3をサポートしていないブラウザなども混在している。
IEでは9以上だし。(ここでも問題児IE!!)

css3をサポートしていなくて、”-moz”や”-webkit”をサポートしているブラウザも多いため、できるだけより多くののブラウザでドロップシャドウが見えるように一応、上の2行も定義しているという所です。

ドロップシャドウのプロパティ設定

.shadow{
	-moz-box-shadow: 2px 2px 3px 3px #CCC;
	-webkit-box-shadow: 2px 2px 3px 3px #CCC;
	box-shadow: 2px 2px 3px 3px #CCC;
}
  • 1つ目の2pxは水平方向の影の値の設定。正の値で右側へ、マイナスの値を入れると影が左側へ。
  • 2つ目の2pxは垂直方向の影の設定。正の値で下側へ、マイナスの値を入れると影が上側へ。
  • 3つ目の3pxはぼかしの幅の大きさです。マイナスの値は設定不可。値が大きいほど影がボケていきます。
  • 4つ目の3pxは影の大きさです。正の値で大きく、マイナスの値で小さくなります。
  • #cccは影の色です

サンプルHTMLではbox要素と画像と両方使い回せるように、設定していますが、box要素と画像にそれぞれ別のCSSを適用してもOKですね!
サンプルのダウンロードはこちらからどうぞ
※htmlファイルとcssが入っています。

関連記事

  1. WEBサイト内の電話番号表記がskype番号になってしまうのを制御する…

  2. Googleカレンダーをホームページに表示させる方法

  3. Google AJAX Feed APIで静的HTMLに外部ブログを読…

  4. レスポンシブデザインでインラインフレームをフィットさせる

コメント

  1. この記事へのコメントはありません。

  1. 2014年 8月 25日

CAPTCHA


最近の記事

  1. 「雑誌取材」や「TV番組取材」という名目の広告営業にご注意!
  2. フリーランスに必要な「稼ぎ力」「継続力」を身につける
  3. ブログって何をどう書いたらいい?
  4. ホームページ・ブログ・SNS それぞれの特徴と役割そして使い分け

アーカイブ

制作実績一覧

  1. まごころ本舗様
  2. アロマ時間
  3. 芦屋気功療法院
  4. ホメオスタジア 敏感肌・乾燥肌用クレンジング&洗願ジェル
  5. office-aki
  6. looplus 神戸の不動産買取・売却・リフォーム
  7. 12starz
  8. SOARist
  9. ダンスウェア ララック様