これはかっこいい！要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css

Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。
htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作に対応して、ふわりとシャドウを与えることもできます。

Box-shadows.css
Box-shadows.css -GitHub

• Box-shadows.cssのデモ
• Box-shadows.cssの使い方
• 独自のボックスシャドウを作成

Box-shadows.cssのデモ

デモでは、さまざまなボックスシャドウを楽しむことができます。

デモページ

カードなどをふわりと浮かばせるシンプルなボックスシャドウをはじめ、サイズや位置やブラーなどのさまざまなボックスシャドウが用意されています。

デモページ: ボックスシャドウの実装

ボックスシャドウはすべて、HTMLにclassを加えるだけで実装できます。

デモページ: ボックスシャドウの実装

Box-shadows.cssの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: HTML

ボックスシャドウを加えたい要素にclassを加えます

ボックスシャドウをホバー時に適用したい場合は、「h」を追加するだけです。

classはさまざまなボックスシャドウが用意されています。詳しくは、下記ページをご覧ください。

Box-shadows.cssの使い方

独自のボックスシャドウを作成

ジェネレータを使用して、独自のスタイルでボックスシャドウのコレクションを増やすこともできます。

独自のボックスシャドウを作成

ボックスシャドウのサイズ・位置・不透明度・カラーなどを簡単に設定でき、作成したclassをbox-shadows.min.cssにコピペして利用できます。