div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。

下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされたさまざまなデザインが実装できます。

augmented-ui
augmented-ui -GitHub

augmented-uiは、Webページやアプリのdiv要素をはじめとするあらゆるUI要素にサイバーパンク風のスタイルを与えることができます。
ライセンスはBSD 2-Clause Licenseで、個人でも商用でも無料で利用できます。

augmented-ui

使い方は簡単、外部スタイルシートを埋め込み、HTMLの要素にclassを与えるだけで利用できます。

プラグインを利用すると、カスタムプロパティ--augmented-uiを使用して、CSSからHTMLに自動的に追加および更新もできます。

augmented-uiのプラグイン

対応ブラウザは、Chrome 49-54, Safari 9.1+, iOS Safari 11+, Opera 36-41, Opera mobile 46+, UC Browser 12+, Samsung Internet 5+です。
非対応ブラウザには、自動的にフォールバックが適用されます。

augmented-uiの対応ブラウザ

augmented-uiのCSSを適用するとどうなるかは、テストページで確認できます。

ビジュアルのテストページ

かなり複雑な形を実装することも可能で、ボーダーやボックスのスタイルをはじめ、clip-pathを使用してサイバーパンクのさまざまな形が実装されています。

ビジュアルのテストページ

ドキュメントも用意されており、それぞれの実装方法・コード、そしてCodepenも用意されているので、すぐに試すことができます。

ドキュメント