立体的な影を表示

January,09 2012

こんにちは、ゼノフィ渡部です。

CSSだけで立体的な影を表示する方法をご紹介いたします。

ポイントは「div.shadow_box」での「position: relative;」の相対指定と「top: -5px;」、「left: -5px;」です。位置を移動させる要素に相対指定し、上と左にマイナスを指定をして、影があるように見せています。

div.shadow_area {
  width: 150px;
  height: 150px;
  background: #EFEFEF;
}
 
div.shadow_box {
  position: relative; /* 相対指定 */
  top: -5px;   /* 上に5px移動 */
  left: -5px;　/* 左に5px移動 */
  width: 150px;
  height: 150px;
  background: #CCC;
}

大枠の「<div class="shadow_area">」と位置を移動させて影があるように見せるための「<div class="shadow_box">」の2つのdivがあります。

<div class="shadow_area">
    <div class="shadow_box">
        テキスト
    </div>
</div>

単色かつ2色での表示の場合などに使用するとよろしいのではないでしょうか。

サンプル

CSS

div.shadow_area {
  width: 150px;
  height: 150px;
  background: #EFEFEF;
}
 
div.shadow_box {
  position: relative; /* 相対指定 */
  top: -5px;   /* 上に5px移動 */
  left: -5px;　/* 左に5px移動 */
  width: 150px;
  height: 150px;
  background: #CCC;
}

HTML

<div class="shadow_area">
    <div class="shadow_box">
        テキスト
    </div>
</div>

Webデザイン

立体的な影を表示