【備忘録】CSS3ですりガラスを通して覗いたようなぼかし処理「グラスモーフィズム」

 

 Web技術

それが「グラスモーフィズム」

背景画像の上に載せた要素を透かす処理などは
backgroundプロパティのalphaやopacityプロパティなどでよく行いますが
すりガラスを通して覗いたようなぼかし処理がCSS3で再現可能と知り備忘録。

背景を透かしたのみの状態とグラスモーフィズムを使用した状態を載せておきます。

背景を透かしたのみ

ただ背景を透かしたのみ。
ただ背景を透かしたのみ。

グラスモーフィズムを使用

処理を行うためには
backdrop-filterプロパティを使用します。

値のblurはぼかし処理です。

すりガラスを通して覗いたようなぼかし処理。
それが「グラスモーフィズム」

ちなみにbackdrop-filterプロパティはblur以外の値もあります。

  • brightness():明るさを調整(%指定)
  • opacity():透過度を調整(%指定)
  • contrast:コントラストを調整(%指定)
  • grayscale:グレースケールに変換(%指定)
  • invert():色を反転(%指定)
  • sepia():セピア調(%指定)
  • saturate():彩度を調整(%指定)
  • hue-rotate():色相(deg指定)
  • blur():ぼかし(px指定)
  • drop-shadow():ドロップシャドウ(px指定)

これはデザインの幅を広げたりできそうです(*゚▽゚*)

当然といえば当然ですがモダンブラウザのみ使用可能です。

I…いやもうそれは良いからw
もう6月でサポート終了してるからw

 この記事の投稿者

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

ページ最上部へ