コーディング

【CSS】要素の背景に様々なエフェクト効果を設定できる「backdrop-filter」

  • このエントリーをはてなブックマークに追加
【CSS】要素の背景に様々なエフェクト効果を設定できる「backdrop-filter」

こんにちは、ワタナベです!

今回は要素の背景に様々なエフェクト効果を設定できる「backdrop-filter」をご紹介

backdrop-filter

以下サンプルになります。

SAMPLE

See the Pen
Untitled
by Akiho (@wcaotdaenpaebne)
on CodePen.

対応ブラウザ

Data on support for the css-backdrop-filter feature across the major browsers from caniuse.com


短いコードで簡単に要素の背景にエフェクト効果を設定できます!
複数設定することも可能です(^^♪

以下のようなジェネレーターツールもあるので、よく分からないな~って方は是非使ってみてください!
ドロップシャドウや透過度(opacity)は結構ややこしいな~と思いました(^^;

CSS Backdrop-filter ジェネレーター

 

それではまた次回。

ご閲覧ありがとうございました♪

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

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ