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

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

サイトのキャプチャ

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

Box-shadows.cssのデモ

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

サイトのキャプチャ

デモページ

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

サイトのキャプチャ

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

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

サイトのキャプチャ

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

Box-shadows.cssの使い方

Step 1: 外部ファイル

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

Step 2: HTML

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

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

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

サイトのキャプチャ

Box-shadows.cssの使い方

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

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

サイトのキャプチャ

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

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

sponsors

top of page

©2024 coliss