これはかっこいい!要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css
Post on:2018年7月17日
Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。
htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作に対応して、ふわりとシャドウを与えることもできます。

Box-shadows.css
Box-shadows.css -GitHub
Box-shadows.cssのデモ
デモでは、さまざまなボックスシャドウを楽しむことができます。

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

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

Box-shadows.cssの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
1 2 3 4 |
<head> ... <link rel="stylesheet" href="box-shadows.min.css"> </head> |
Step 2: HTML
ボックスシャドウを加えたい要素にclassを加えます
1 |
<div class="bShadow bShadow-1"></div> |
ボックスシャドウをホバー時に適用したい場合は、「h」を追加するだけです。
1 |
<div class="bShadow bShadow-1h"></div> |
classはさまざまなボックスシャドウが用意されています。詳しくは、下記ページをご覧ください。

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

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