CSS3のbox-shadowで影のエフェクトを付ける方法

CSS3のbox-shadowを使って影のエフェクトを付ける方法の紹介です。

CSSのbox-shadowだけで、さりげなく紙が浮かんだようなエフェクトを付ける事ができます。 ボックスに対して指定すれば、その部分だけふんわり浮かんだように見せる事ができるので是非お試しを!

またここで紹介している方法は全てコピペでブログやwebサイトに実装できます。 あと最後に、CSSを使わず画像としてシャドウエフェクトを使える素材も紹介しています。

CSS3のbox-shadowエフェクトサンプル

box-shadowを使った影エフェクトのサンプル一覧 box-shadowを使った影のエフェクトは、Creating Different CSS3 Box Shadows Effectsで紹介されている方法です。

まずは下記のCSSをコピペして下さい。 各デモのh3とdiv部分の共通設定となります。

.box h3{
  text-align:center;
  position:relative;
  top:80px;
}
.box {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}

上記をコピペしたら、下記の中から使いたいエフェクトのCSS・htmlをコピペして下さい。 それで実装できます。

また各デモのHTMLはclass名を変えているだけとなるので、基本的には全て同じとなります。

影エフェクト1

effect1の表示サンプル

シャドウを均等に付けた、シンプルで一般的なエフェクト

<div class="box effect1">
  <h3>Effect 1</h3>
</div>
.effect1{
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

影エフェクト2

effect2の表示サンプル

両端にシャドウを付け、浮いているように見えるエフェクト

<div class="box effect2">
  <h3>Effect 2</h3>
</div>
.effect2
{
  position: relative;
}
.effect2:before,
.effect2:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

影エフェクト3

effect3の表示サンプル

左端にのみシャドウを付け、片側だけ浮いているように見えるエフェクト

<div class="box effect3">
  <h3>Effect 3</h3>
</div>
.effect3{
  position: relative;
}
.effect3:before{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

影エフェクト4

effect4の表示サンプル

右端のみにシャドウを付け、片側だけが浮いているように見えるエフェクト

<div class="box effect4">
  <h3>Effect 4</h3>
</div>
.effect4{
  position: relative;
}
.effect4:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

影エフェクト5

effect5の表示サンプル

両端のシャドウの広がりを多めに付けたエフェクト。

<div class="box effect5">
  <h3>Effect 5</h3>
</div>
.effect5{
  position: relative;
}
.effect5:before,
.effect5:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

影エフェクト6

effect6の表示サンプル

ボックスの下部に湾曲した影を付けた、自然なエフェクト

<div class="box effect6">
  <h3>Effect 6</h3>
</div>
.effect6{
  position:relative;       
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before,
.effect6:after{
  content:"";
  position:absolute; 
  z-index:-1;
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
  -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:50%;
  bottom:0;
  left:10px;
  right:10px;
  -moz-border-radius:100px / 10px;
  border-radius:100px / 10px;
}

影エフェクト7

effect7の表示サンプル

エフェクト6のシャドウを使用し、上部にもシャドウを付けたエフェクト

<div class="box effect7">
  <h3>Effect 7</h3>
</div>
.effect7{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before,
.effect7:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
}

影エフェクト8

effect8の表示サンプル

ボックスの両側にシャドウをつけたエフェクト

<div class="box effect8">
  <h3>Effect 8</h3>
</div>
.effect8{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before,
.effect8:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
}

対応ブラウザ

  • Internet Explorer 9.0以降
  • Firefox 3.5以降
  • Chrome 1以上
  • Safari 3以上
  • Opera 10.5以降

対応ブラウザは上記のようになります。 ベンダープレフィックスは、必要に応じて削除して下さい。

シャドウエフェクト素材

デザイン制作時に画像などとしてシャドウエフェクトを使いたい場合は、次のような素材があります。 どれもPSD形式で配布されています。

ライセンスは各自異なるので、確認お願いします。

dropshadow.psd

シンプルでカッコいいシャドウエフェクト

dropshadow-psdの表示サンプル
10 Box Shadow Effects

10種類のシャドウエフェクト。 CSSでのbox-shadowをそのまま持ってきたような感じ

10 Box Shadow Effectsの表示サンプル

まとめ

こんな感じでCSSだけで、ふわっと浮いたようなシャドウ(影)のエフェクトを付ける事ができます。 ブログとかで画像に対して使用すると綺麗になりますし、マウスが乗った時のみ適用してもカッコよくなると思います。

実装するのもコピペだけで簡単なので、ぜひお試しを!