CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit

iOSにLiquid Glassが採用されてから早半年が過ぎました。
慣れない当初は使いにくさを感じていましたが、Liquid Glassを採用しているアプリが増え、最近では逆にLiquid Glassを採用していないアプリのUIを見るとちょっと古くさい感じがしたりします。

WebサイトやスマホアプリのUIで使われるカード、ボタン、ナビゲーション、タブ、アコーディオン、モーダル、フォーム、テーブルなどのUI要素やコンポーネントをLiquid Glassの美しいデザインにしたUI Kitを紹介します。

Liquid Glass UI Kit

Liquid Glass UI Kitは、CSS Guidelines(管理しやすく、拡張性のあるCSSを書くためのガイドライン)に準拠し、BEMメソッドで実装されたUIキットです。

ライセンスは独自で、商用プロジェクトでも無料で利用できます。複製、変更、配布、サブライセンスなども無償とのことです。

See the Pen
Pure CSS Glassmorphism Liquid Glass UI kit by coliss (@coliss)
on CodePen.

では、Liquid Glass UI KitのUI要素をいくつか見てましょう。
完全なデザイントークンシステムで、アクセシブルな15種類以上のUIコンポーネント、12種類のアニメーションが楽しめます。

Liquid Glass UI Kit: ライトモード

ライトモード・ダークモードの両方をサポートしています。
この記事では、ライトモードを主体に掲載しています。

Liquid Glass UI Kit: ダークモード

まずは、スマホアプリでもよく見かけるLiquid Glassのカード。ホバーすると、カードが浮き上がります。

Liquid Glassのカード

ボタンももちろんLiquid Glassです。プライマリだけでなく、アクセントなど異なるカラーもLiquid Glassになっています。

Liquid Glassのボタン

ボタン、ナビゲーション、タブ、ドロップダウンなどがあり、フォームも美しいLiquid Glassが適用されています。

Liquid Glassのフォーム

Liquid Glassのアコーディオンは、クリック・タップで開閉します。

Liquid Glassのアコーディオン

テーブルもLiquid Glassにすると、美しさとともに見やすさもアップしますね。

Liquid Glassのデータテーブル

モーダルは、モーダルウインドウだけでなく、開閉ボタンもLiquid Glassにデザインされています。

Liquid Glassのモーダル

最後は、Liquidアニメーション。すべてピュアCSSで実装されており、Liquid Glassの美しいデザインがゆらゆらアニメーションします。

Liquidアニメーション