[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート

カードやボタンをはじめ、さまざまな要素をふわりと浮かび上がらせる繊細なシャドウを与えるスタイルシートを紹介します。

box-shadowを重ねがけした複雑なスタイルシートですが、スニペットに登録しておくと簡単に利用できます。

デモのキャプチャデモのアニメーション

Multiple Shadows

繊細なシャドウを与えるスタイルシート

シャドウはbox-shadowを使用し、複数のシャドウを重ねがけします。
カードやボタンなど、さまざまな要素に利用できるので、スニペットに登録しておくと便利です。

使い方は簡単で、div要素でもp要素でもclassに「.shadow」を加えるだけでOKです。

カードにシャドウを与える

まずは、色付きの普通のカードにシャドウを与えてみます。

カード

色を無しにしても、シャドウを与えると、ふわりとカードが浮かび上がります。

カード

ボタンにシャドウを与える

ボタンにシャドウを与えるのも簡単、classに「.shadow」を加えるだけでOKです。

ボタン

ホバー時にシャドウを与え、ふわりと浮かび上がらせてもよいでしょう。

ボタンはリンク要素で実装していないので、「cursor: pointer;」でカーソルを指にし、ホバー時に「transform」で飛び出す感じにします。

ボタン

ボタンを背景と同じ色にしても、面白い効果が得られます。

ボタン

デモ

シャドウは下記ページでいろいろコードを試すこともできます。

サイトのキャプチャ

Multiple Shadows

top of page

©2017 coliss