背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできる・「Glassmorphism CSS Generator」

ガジェット総合
Glassmorphism CSS Generator
Glassmorphism CSS Generatorは背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできるWebアプリです。
Windows VistaのUIでも見られ、macOS Big Surにも採用されたすりガラス風UIはGlassmorphismと呼ばれており、ブラウザでも最近のトレンドになっています。
モダンブラウザでは背景にフィルターをかけられるbackdrop-filterが採用され、こちらのジェネレーターでも使われています。
backdrop-filterのブラウザ対応状況は以下の通りです。
Can I Use css-backdrop-filter?
Firefoxだけに目をつぶれば導入できそうです。そのFirefoxも現在検討中なのでいずれ対応してくれるかもしれません。
Firefoxへのフォールバックが必要な際は@-moz-document url-prefix()などを使って対応する形になります。
尚、強いこだわりが無いなら一般的なWebサイトならIEは無視して良いと思います。
Glassmorphism CSS Generator
Source: かちびと

リンク元

コメント

タイトルとURLをコピーしました