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

Post on:2017年10月25日

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

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

.shadow {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 
              0 1px 6px rgba(0, 0, 0, 0.05), 
              0 8px 8px rgba(0, 0, 0, 0.1), 
              0 16px 16px rgba(0, 0, 0, 0.1), 
              8px 32px 32px rgba(0, 0, 0, 0.15), 
              8px 64px 64px rgba(0, 0, 0, 0.15);
}

.shadow {

box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1),

0 1px 6px rgba(0, 0, 0, 0.05),

0 8px 8px rgba(0, 0, 0, 0.1),

0 16px 16px rgba(0, 0, 0, 0.1),

8px 32px 32px rgba(0, 0, 0, 0.15),

8px 64px 64px rgba(0, 0, 0, 0.15);

}

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

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

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

カード

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

カード

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

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

ボタン

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

.shadow2 {
  cursor: pointer;
  transition: box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99), 
  transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99);
}
.shadow2:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 
              0 1px 6px rgba(0, 0, 0, 0.05), 
              0 8px 8px rgba(0, 0, 0, 0.1), 
              0 16px 16px rgba(0, 0, 0, 0.1), 
              8px 32px 32px rgba(0, 0, 0, 0.15), 
              8px 64px 64px rgba(0, 0, 0, 0.15);
  transform: scale(1.05) translateY(-0.5rem);
}