テンプレート・素材カテゴリ


CSS3でボックスや画像に影をつける「box-shadow」

TOPページ > デザイン講座 > ボックスや画像に影をつける「box-shadow」

box-shadowプロパティでは、ボックスや画像に陰影や装飾をつけることができます。ちょっとしたことで、センスがよくなること間違いなしです。


CSS:box-shadow: 横方向 縦方向 ぼかしの距離 影の色;

BOX-SHADOW
.box-01 {
  box-shadow: 5px 5px 10px #666;
  -webkit-box-shadow: 5px 5px 10px #666;
  -moz-box-shadow: 5px 5px 10px #666;
  font-size: 50px;
}
<div class="box-01>BOX-SHADOW</div>

BOX-SHADOW

4方向に影をつけることもできます。

.box-02 {
  box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
  -webkit-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
  -moz-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
  font-size: 50px;
}
<div class="box-02>TEXT-SHADOW</div>

BOX-SHADOW

グラデーションのボックスを作ることもできます。

.box-03 {
  box-shadow: 0 2px 1px #fff inset;
  -webkit-box-shadow: 0 2px 1px #fff inset;
  -moz-box-shadow: 0 2px 1px #fff inset;
  background-image:-moz-linear-gradient(top, #f9f9f9, #cfcfcf);
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, #f9f9f9),color-stop(1, #cfcfcf));
}
<div class="box-03>BOX-SHADOW</div>

バラの写真

もちろん画像にも影をつけられます。

.box-04 {
  box-shadow: 3px 3px 5px #666;
  -webkit-box-shadow: 3px 3px 5px #666;
  -moz-box-shadow: 3px 3px 5px #666;
}
      <img class="box-04" src="images/rose.jpg" width="470" height="72" alt="バラの写真">

BOX-SHADOW

「inset」をつけると内側に影が、そのほか色付きの影もつけられます。

.box-05 {
  box-shadow: inset 0 0 10px 10px rgba(40, 120, 212, 0.5);
  -webkit-box-shadow: inset 0 0 10px 10px rgba(40, 120, 212, 0.5);
  -moz-box-shadow:  inset 0 0 10px 10px rgba(40, 120, 212, 0.5);
  font-size: 50px;
}
<div class="box-05>TEXT-SHADOW</div>

参照:[CSS]ボックスに影を付ける(ドロップシャドウ)CSS のプロパティ「box-shadow」
考察中:[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス


Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ