cssでPhotoshopのように画像にエフェクトを追加する方法

cssでPhotoshopのように画像にエフェクトを追加する方法

こんにちは。koyaです。
今回はcssプロパティbackdrop-filterでエフェクトを追加する方法について紹介します。

実装

早速ですが実際のコードがこちらになります。

画像はフリー写真素材ぱくたそ さんの物を使用させていただきました。

解説

backdrop-filterにはオプションが10種類あり、ブラー、セピア、グレースケールなどのよく使うエフェクトもあります。

blur ぼかし効果
brightness 明るさを変更
contrast コントラストを変更
drop-shadow ドロップシャドウ効果
grayscale グレースケール効果
hue-rotate 色相変換効果
invert 階調の反転効果
opacity 不透明度変更
sepia セピア効果
saturate 彩度の変更

もしぼかし効果を追加する場合は下記の1行を追加するだけです。


.sample {
  backdrop-filter: blur(10px);
}  

以下は一例ですが:hoverでぼかし効果を追加する使い方は便利そうです。

現在IE以外のブラウザでは対応しています。
Bootstrap5ではIE11のサポートも切るようなのでそろそろIEを気にせずにコーディング出来るようになるといいですね。

この記事を読んだ人にオススメ