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

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

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

実装

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

See the Pen bg-filter by bashalog (@bashalog) on CodePen.

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

解説

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

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

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


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

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

See the Pen vYNYPmJ by bashalog (@bashalog) on CodePen.

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

  • このエントリーをはてなブックマークに追加

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