【HTML＆CSS】画像を光らせる（filter:drop-shadow）

2023年8月16日2023年12月20日

今回は『filter:drop-shadow』を使って画像を光らせてみようと思います。

このようにテキストを光らせます。

背景を透過した画像を用意します。

まずPhotoshopなどでこのように背景が透過している画像を用意します。

HTMLコードを見る

<body>

  <div class="bg-line bgLine"><img src="img/01.png" alt="" class="glowAnime">
  </div>

</body>

テキストのCSS

CSS　コードを見る

body {
  background-color: #000;
}
.glowAnime{
  width: 500px;
  opacity: 0;}

.glowAnime{ animation:glow 3s ease-out 0.5s forwards; }

@keyframes glow{
	0% { opacity:0;  filter: drop-shadow(3px 3px 5px #fff);}
	50% { opacity:1; filter: drop-shadow(3px 3px 5px #fff);}
	100% { opacity:1;  filter: drop-shadow(3px 3px 5px #fff);}
}

伸びる背景のCSS

CSS　コードを見る


.bg-line{
	width: 500px;
	margin:0 20px 20px 0;
	box-sizing:border-box;
	margin: 100px auto;
}
.bg-line{
	animation-name:lineAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
	opacity:0;
}

@keyframes lineAnime{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}
.bgLine::before{
	animation-name:bgLineAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
@keyframes bgLineAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

これbox-shadowでもできるのでは？と思いますよね。

filter: drop-shadowとbox-shadowの違い

box-shadowの場合

影をbox-shadowで指定した場合このように画像に影がつきます。

見にくいので背景をピンクにしました。こんな感じで画像に影がついています。

ちょっとやりたいことと違いますね。
コードはこちら

CSS　コードを見る

@keyframes glow{
	0% { opacity:0; box-shadow:3px 3px 5px #fff;}
	50% { opacity:1; box-shadow:3px 3px 5px #fff;}
	100% { opacity:1; box-shadow:3px 3px 5px #fff;}
}

box-shadowの記述：ｘ軸 y軸ぼかし色；

YAMADA電気家電リサイクル

電子レンジ：1100円

またbox-shadowは複数つけることも可能です。

filter: drop-shadowの場合

filter: drop-shadowを適用するとこのようにテキストに影をつけることができます。

こちらも見やすく背景を白くするとテキストに影がついているのが分かります。

コードはこちら

CSS　コードを見る

@keyframes glow{
	0% { opacity:0;  filter: drop-shadow(3px 3px 5px #fff);}
	50% { opacity:1; filter: drop-shadow(3px 3px 5px #fff);}
	100% { opacity:1;  filter: drop-shadow(3px 3px 5px #fff);}
}