こんにちは。fusekido おおやまです。
引き続きザクロ | the clo のナビゲーションバーに導入したすりガラスの紹介を続けます。
なぜBlogにこんなニッチな話題を載せるのか。当サイトはインターネット上のあらゆる方々の教えを反映し作られており、 私も微力ながら協力いたいと考えております！ 最近のWebデザイントレンドは"すりガラス"のようだ。トwitterやアppleでも採用している。
基本的なデザインはCSSでbackdrop-filiterと記述するだけで完了する。(プロレスの技っぽい響き)

CSSの教祖的なサイトMDNにはこう定義されている。

"後ろの要素に対してぼかしや、カラーなどのエフェクトを適用する。エフェクトを見るためには、透明にしなければならない"

こうしたコンピューター言語辞典というのは、概要を読んでも理解につながらない。動かしてみてやっとわかる。
まずはここにパーマをかけて上機嫌なおおやまを用意しよう。
これはいま、写真の要素の上に、白で塗りつぶした四角を上にのせた状態
四角をスケスケすりガラスにしていく。
早速、backdrop-filiterを使ってみよう。 こいつぁすりガラスだ！
いま backdrop-filter: blur(10px); としてやってみた。blurの値を増やしていくと、すりガラスのモザイク強度が上がる。
blur(2px) blur(30px)
ここまで来るとハードなモザイクになっていますね。
よ～し導入だ！と、意気揚々とザクロ | the clo のサイトに反映していく。

しかし、私の潜在意識が話かけてくる！

ばあちゃん「じいちゃんは、大工の仕事を見て蔵を建てたんだよ」

・・・・

おおやま「な～～にぃ？」

つづく