Mitzyuki's Blog

画像データの表示枠

画像データに影(ドロップシャドウ)を付けてみる。
検索するとドロップシャドウ用の画像データを用意しておき 背景画像として表示する方法が一般的な様なのだが、 画像の枠のために背景画像を用意するのも面倒だったので、 css だけを利用して簡易的なドロップシャドウ風の見た目を実現してみた。

画像を利用したドロップシャドウと比べると グラデーションなどもなく地味だとは思うのだが、 簡単に実現でき、しかも画像データがないので多少は軽いと思う。

  1<div class='shadow'>                        <!-- 影 -->
  2    <div class='images'>                    <!-- 画像枠 -->
  3        <img src='画像ファイル' ... >
  4    </div>
  5</div>
    

画像データは2重の <div> タグで囲む。 内側の <div> タグで画像の周囲の白い縁を表現してあり、 外側の <div> タグで影を表現している。
画像を上方向、左方向にずらす事でドロップシャドウの効果をだしている。

  1.shadow {
  2    background: #bcbdc2;            /* 影の色 */
  3    float:      left;               /* 回り込みの制御 */
  4}
  5
  6.images {
  7    position:   relative;
  8    top:        -4px;               /* 画像を上に 4px 移動 */
  9    left:       -3px;               /* 画像を左に 3px 移動 */
 10    padding:    4px;                /* 画像の縁の幅 */
 11    background: #fffff0;            /* 画像の縁の色 */
 12    border:     1px solid #999999;  /* 画像の縁の枠線の色 */
 13}
   

A quick preview will be rendered here when you click "Preview" button.