画像フィルター
@wordpressimg.example {
filter: saturate(90%) brightness(85%);
}img.example {
transition: 0.4s ease;
}
/* ホバー時のエフェクト */
img.example:hover {
filter: brightness(60%) blur(1px);
}img.example {
filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}drop-shadow(x方向 y方向 ぼかし半径 色)
filter: drop-shadow()と、CSSのbox-shadowプロパティの違いは何なのでしょうか？
大きな違いは、SVGやPNG画像を使ったときにdrop-shadowなら画像の中のオブジェクトに影をつけてくれる点です。
Webページでよく見るようなエフェクトのあるカードのサンプル
<a href="#" class="card">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/v1582515398/posts/iqrcbfz5cxbinq8ik14o.jpg" loading="lazy" class="card__img">
<div class="card__title">Are You Ready?</div>
</a>.card {
display: block;
position: relative;
overflow: hidden;
border-radius: 5px;
}
/* テキストをカード下に固定配置する */
.card__title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1em;
text-decoration: none;
color: #FFF;
font-weight: bold;
font-size: 1.6em;
}
.card__img {
display: block;
width: 100%;
filter: brightness(70%); /* フィルター */
transition: 0.3s; /* トランジション */
}
/* カードホバー時 */
.card:hover .card__img {
filter: brightness(150%); /* フィルターを変更 */
transform: scale(1.3); /* 画像を拡大 */
}
