最近、Appleが発表した「Liquid Glass」っていう新しいUIデザインが話題になってるんだけど、見た目がぷるんとした透明感のある屈折効果で、なんかすごくオシャレ✨
「これってウェブでもできるのかな？」ってふと思って調べてみたら、意外にもCSSのフィルターとSVGをうまく組み合わせればできちゃうってわかったんだよね💡
どうやって作ったの？
ざっくり言うと、こんな感じ👇
-
SVGで形を作る
ぷにっとしたガラスっぽい形をSVGで描くよ。これが土台になる感じ🌸 -
CSSのフィルターで屈折感を演出
Blur（ぼかし）やDrop-shadow、そしてカラーの調整で、光が曲がってるような見た目を作り出す✨ -
ちょっとした計算で動きを調整
ここが地味に大事で、屈折の強さや方向を変えるために簡単な数式を使うんだよね。数学って苦手だけど、これは楽しかった😆
実際の動きや見た目は、ブログにデモがあるから見てみるとわかりやすいよ👉 Liquid Glass CSS+SVG デモ
思ったこと
正直、はじめは「こんな複雑そうなの、自分にできるのかな？」って思ったけど、試しにやってみると意外とシンプルな要素の組み合わせで表現できるところが面白かった🥺
あと、こういうガラスっぽい質感って、ただの透明じゃなくて光の屈折や影がポイントなんだな〜って新たな発見だったよ👀
最近のウェブデザインって、ただフラットでシンプルなのだけじゃなくて、こういう奥行き感とか質感も大事にされてるんだなぁって思った💭
気になる人はぜひリンク先のデモを触ってみて！わたしみたいに「できるかな…？」って思ってる人にもおすすめだよ👍
はてな
コメント
ハンナ
iOSで動かないのが皮肉だね。
ロバート
普段は見てるだけだけど、これは深すぎてまるでごちそうだったよ、ありがとう。
キンバリー
理論も数学例も最高でびっくりした、期待以上の出来！
ベン
このサブで30人目くらいだけど…君が一番うまくやってる！
ハンナ
ガラス効果の研究がすごいし、インタラクティブもカッコいい。 でもボタンの作り込みはちょっとやりすぎじゃない？
エイダン
このインタラクティブデモ、別次元の神レベルだね👌🔥
レオ
今まで見た中で一番のリキッドグラス実装！ 拍手！
サラ
REPLで試したけど屈折効果が動かなくて、何か足りないのかな？
リリー
ウェブ開発好きだけど、結局「黒背景に白文字じゃなきゃダメ！ ページ速度も100点必須！」っていう地獄に向かうんだろうな…
クリス
ガラスモーフィズムは昔流行ったけどどこか消えたね、iOSでまた進化しそう。 開発者が次どう出るか楽しみ。
サラ
こういう投稿見ると自分が情けなくなるよ。 ブラボー！
ミア
インタラクティブも細部もすごくて3回も見返したよ。 失敗ログの作業中のいい気晴らしに！
ロバート
これにどれだけ時間かけたのか想像もつかない、相当な労力だね！
ベン
期待以上に超すごい！ インタラクティブシミュレーション、神対応だね。
レオ
これマジで最高！！
