画像に影をつけてオシャレ度UPするCSS

更新日：2017年7月29日

近頃のWEBサイトのデザインといえば、もっぱら背景白でシンプルで見やすいデザインのサイトが非常に多いです。そして極めつけはオシャレな画像を要所要所で使っているということでしょう。画像を映えさせる為にサイト自体をシンプルにしてるとも言えるかと思います。

そんな画像ですが、未だにフォトショップで編集してー…なんて作業を挟んでいませんか？
勿論悪いことではないのですが、簡単な効果をつけることくらいならCSSだけでも充分なんです。

実装すると下記のような感じになります。

ということで今回はCSSで画像に影をつける方法をご紹介。
いつも通り簡単コピペで実装可能ですので、是非お試し下さい。

まずHTMLですが、例えば以下のように記述します。

class="effect"という記述が重要です。
effectという名前のclassを画像に直接指定しましょう。

次にCSSには以下のように記述します。

.effect {
	box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.8);
}

このCSSで影をつけています。
数値は色々いじってもらって大丈夫ですので、お好みの影がつくように編集してみて下さい。

これにて完成。いつもながらとっても簡単でしたね。
なんだか画像がいまいちだなぁって思っていても、影をつけるだけで“それっぽく"なるのがデザインです。手間暇掛けずCSSだけで出来るこの手法、是非お試し下さい。。