サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. ちょっとしたアクセ…
  • 最終更新日:
  • 投稿者: @signpostme

ちょっとしたアクセントに使える、個人的によく使うbox-shadowの値をメモ

CSS3のプロパティである「box-shadow」。ブラウザ上で影(シャドウ)を描画してくれる、今やWebデザインに欠かせないプロパティの一つです。今回は、個人的によく使うbox-shadowの値をメモ程度に公開したいと思います。

 

ヘッダー部分に使えそうな、下方向だけのシャドウ

-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);

 
上記の値だと、以下のようなシャドウを作ることが可能です。
ヘッダーの下にちょっとつけるだけでも、立体感が出てクオリティが上がると思います。

 

 

box

 

 

 

画像の周りのフレーム代わりとして使えそうなシャドウ

-webkit-box-shadow: 0 0 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 2px rgba(0,0,0,.15);
box-shadow: 0 0 2px rgba(0,0,0,.15);

 
上記の値だと、以下のようなシャドウを作ることが可能です。
画像を引き立てるためのアクセントにいかがでしょうか。
 

 

box

 

 

 

シャドウの使い過ぎには要注意!

box-shadowプロパティは、簡単に影を表現できるようになるので非常に便利なのですが、
あまり使いすぎてしまうと見栄えも悪くなってしまいますし、ブラウザへの負担もかかってしまいます。
 
表示速度を求めるサイトなのであれば、box-shadowをあまり多用せず無難に画像で表現するようにしましょう。
 

新着記事を見る

TOP