狼読

 
2020/05/08

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

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

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

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

画像をHTMLで入れてみよう

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

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

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

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

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

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

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

画像に影をつける方法は非常にシンプルで、cssを1つ記述するだけで実現できてしまいます。使うものは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一行で実現できますので非常に簡単ですね。このエフェクトをあなたのサイトにも取り入れることでよりその画像が引き立つようになると思います。是非とも試して見てくださいね。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/07/17

Macのストレージ(空き容量)を正しく確実に確保!ストレージ 「その他」圧迫の原因と解消方法

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読