【備忘録】CSS3ですりガラスを通して覗いたようなぼかし処理「グラスモーフィズム」
それが「グラスモーフィズム」
背景画像の上に載せた要素を透かす処理などは
backgroundプロパティのalphaやopacityプロパティなどでよく行いますが
すりガラスを通して覗いたようなぼかし処理がCSS3で再現可能と知り備忘録。
背景を透かしたのみの状態とグラスモーフィズムを使用した状態を載せておきます。
背景を透かしたのみ
|
1 2 3 4 5 6 |
.box { background: rgba( 255, 255, 255, 0.4 ); box-shadow: 1px 1px 2px 0 rgb(0, 0, 0, 0.4); border-radius: 10px; padding: 20px; } |
ただ背景を透かしたのみ。
ただ背景を透かしたのみ。
グラスモーフィズムを使用
処理を行うためには
backdrop-filterプロパティを使用します。
値のblurはぼかし処理です。
|
1 2 3 4 5 6 7 |
.box { backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.4); box-shadow: 1px 1px 2px 0 rgb(0, 0, 0, 0.4); border-radius: 10px; padding: 20px; } |
すりガラスを通して覗いたようなぼかし処理。
それが「グラスモーフィズム」
ちなみにbackdrop-filterプロパティはblur以外の値もあります。
- brightness()：明るさを調整（％指定）
- opacity()：透過度を調整（％指定）
- contrast：コントラストを調整（％指定）
- grayscale：グレースケールに変換（％指定）
- invert()：色を反転（％指定）
- sepia()：セピア調（％指定）
- saturate()：彩度を調整（％指定）
- hue-rotate()：色相（deg指定）
- blur()：ぼかし（px指定）
- drop-shadow()：ドロップシャドウ（px指定）
これはデザインの幅を広げたりできそうです(*ﾟ▽ﾟ*)
当然といえば当然ですがモダンブラウザのみ使用可能です。
I…いやもうそれは良いからw
もう6月でサポート終了してるからw
この記事の投稿者
