div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui
Post on:2019年9月18日
sponsors
Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。
下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされたさまざまなデザインが実装できます。
augmented-ui
augmented-ui -GitHub
augmented-uiは、Webページやアプリのdiv要素をはじめとするあらゆるUI要素にサイバーパンク風のスタイルを与えることができます。
ライセンスはBSD 2-Clause Licenseで、個人でも商用でも無料で利用できます。
使い方は簡単、外部スタイルシートを埋め込み、HTMLの要素にclassを与えるだけで利用できます。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui/augmented.css"> </head> |
プラグインを利用すると、カスタムプロパティ--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も用意されているので、すぐに試すことができます。
sponsors
