[css]画像を影をつけて浮き出ているように見せるエフェクトの作り方

今回は、画像をHTMLで貼った時に、影をつけて画像が浮き出ているように見えるようなエフェクトのかけ方についてご紹介したいと思います。

作り方は非常に簡単で、あなたのサイトをよりかっこよく、見応えのあるものにしてくれるかと思います。

では、作り方のご紹介をしたいと思います。

画像をHTMLで入れてみよう

htmlで画像を入れたい場合は、imgタグを使用します。
imgタグの使い方は次の通りです。

<img src="画像のURL" alt="画像の代替文字">

上記のようにhtmlを書くことで画像を入れることができるようになります。

今回は狼読で使われている画像をサンプルとして使用してみようとおもます。

画像をHTMLで入れてみたサンプル

上記の画像に影をつけて立体的に見せるようにcssを記述していこうと思います。

画像に影をつけて浮いているように見せてみよう

画像に影をつける方法は非常にシンプルで、cssを１つ記述するだけで実現できてしまいます。使うものはdrop-shadowというものです。

実際に影をつけてみようと思います。サンプルコードも一緒に載せておきます。

<style>
 .dropshadow-img{
   filter:drop-shadow(2px 4px 6px #000);
   text-align:center;
  }
  .dropshadow-img img{
    width:80%;
  }
</style>
<div class="dropshadow-img">
<img src="画像のURL" alt="画像の代替文字">
</div>

画像に影をつけた場合のサンプル実装例

画像の後ろに影がついて浮いているように見えるようになりましたね。

まとめ

今回は、画像の後ろに黒い影をつけることで画像があたかも浮いているように見えるエフェクトのつけ方をご紹介させていただきました。css一行で実現できますので非常に簡単ですね。このエフェクトをあなたのサイトにも取り入れることでよりその画像が引き立つようになると思います。是非とも試して見てくださいね。