[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック

CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。

デモのキャプチャ

How to create slick effects with CSS3 box-shadow
デモページ

下記は各ポイントを意訳したものです。

box-shadowプロパティとは

「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。

<shadow> = inset? && [ <length>{2,4} && <color>? ]

簡単な例をみてみましょう。

CSS

box-shadow: 3px 3px 10px 5px #000;

これは左から順番に、水平方向のオフセット、垂直方向のオフセット、ブラー(ぼかし)の半径、シャドウの距離、シャドウのカラー、となっています。

  1. 水平方向のオフセット
    値を正にすると右、負にすると左になります。
  2. 垂直方向のオフセット
    値を正にすると下、負にすると上になります。
  3. ブラー(ぼかし)の半径
    値が大きいほどぼやけ、小さいほどくっきりします。
    負の値は利用できません。
  4. シャドウの距離
    値を正にすると大きく、負にすると小さくなります。
  5. シャドウのカラー
    シャドウのカラーです。
  6. inset
    「inset」のキーワードを挿入すると、外側のシャドウから内側になります。

ページ全体に奥行きを加えるエフェクト

ページ上部にボックスシャドウを適用して、ページ全体に奥行きを加えます。

デモのキャプチャ

デモページ:ページ上部の拡大

HTML

<body>
...
</body>

CSS

body:before
{
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

紙がめくれたようなエフェクト

ボックスの両端下部にボックスシャドウを適用して、紙がペロッとめくれたようなエフェクトを加えます。

デモのキャプチャ

デモページ:パネルの拡大

HTML

<div id="box">
...
</div>

CSS

#box
{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

#box:before, #box:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

対応ブラウザ

対応ブラウザは、CSS3のbox-shadowを使用しているため、下記の通りです。

  • Internet Explorer 9/10
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera 10.5+

top of page

©2017 coliss