最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ

Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに使えるCSSのテクニックです。 my favorite clever CSS tricks by @Steve8708 下記は各ポイントを意訳したものです。 ※著者様の許諾のもと、翻訳・掲載しています。 Apple: ヘッダに使用されている美しい磨りガラスのエフェクト Appleのヘッダに使用されている、美しい磨りガラスのエフェクトはCSSで実装されています。 How does Apple make that awesome frosted glass effect

[coliss]

最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ。

[syque]

“背景色を設定し、backdrop-filter: blur(20px);でぼかし、磨りガラスの効果を与えます。Appleではさらに工夫がされており、saturate(180%)で背景の彩度も調整しています。”

[spark7]

なんか既視感あるなと思ったら https://b.hatena.ne.jp/entry/s/photoshopvip.net/136000 で見たのか

[flirt774]

Great Steve

[sima-box]

、

[north_korea]

全部Apple

[kns_1234]

Appleのヘッダー、ぼかしだけでなく彩度が高くなっている気はしてましたが、気のせいではなかったのですね。