朝飯前跡地

« Kiroro，プラネタリウムライブ各紙記事 | トップページ | CONVERT BREAKS »

2004.02.08

画像（写真）にフチや影をつける方法

ココログにアップした画像（写真）に，フチや影をつけて引き立たせる方法です。情報元は，1976design.com ですが，hail2u.net 経由で知りました。

これは普通に画像をアップした状態。でも，ちょっと面白みがない。

画像に影をつけます。これでかなり引き立ちます。

本文の背景と画像のコントラストが小さい場合は，フチをつけるとさらに引き立ちます。ま，この画像の場合だとフチは要らないかな。

さて，画像に影をつけるやり方です。基本的な考え方は，まず影になる画像と表に表示する画像を重ね合わせます。そして，表に表示する画像を上と左にマイナスマージンを与えて左上に少し（5px）ずらすのです。それで影が見えるようになります。ですから，影になる画像を用意する必要があります。それは，1976design.com から落とすか，ここから落としてください。

そしてダウンロードしたgif画像は，ご自身のココログにアップしてください。ここでは，画像のファイル名を shadow_001.gif 。アップロードしたフォルダ名を image として説明しています。

まず，スタイルシートに下記を追加します。

div.img-dec {
  background-image: url("image/shadow_001.gif");
  background-repeat: no-repeat;
  background-position: bottom right;
  margin: 25px 5px 10px 5px;
  padding: 0px;
  position: relative;
  }

div.img-dec img {
  background-color: #FFFFFF;
  margin: -5px 5px 5px -5px;
  position: relative;
  vertical-align: bottom;
  }

div.img-fuchi {
  background-image: url("image/shadow_001.gif");
  background-repeat: no-repeat;
  background-position: bottom right;
  margin: 25px 5px 10px 5px;
  padding: 0px;
  position: relative;
  }

div.img-fuchi img {
  background-color: #FFFFFF;
  border: 1px solid #A9A9A9;
  margin: -5px 5px 5px -5px;
  padding: 4px;
  position: relative;
  vertical-align: bottom;
  }

そして，画像に影だけをつけたい時は，下記のように記入してアップしてください。なお，画像のURLや，代替説明文，幅・高さのサイズなどは適宜置き換えてください。

<div class="img-dec" style="width: 400px;">
<img alt="頑固ふたすじ" src="./asameshimae/photo/TsujiNozomi_002.jpg" width="400" height="300" />
</div>

style="width: ○○px;" の記入を忘れずに。

フチと影をつけて画像をアップしたい時は，下記のように記入します。

<div class="img-fuchi" style="width: 410px;">
<img alt="頑固ふたすじ" src="./asameshimae/photo/TsujiNozomi_002.jpg" width="400" height="300" />
</div>

style="width: ○○px;" を記入するときに，元の画像の幅に10足したサイズを記入してください。ちょっと面倒くさいけど。

これで完成です。

参考記事
Easy CSS drop shadows（1976design.com）

00:06 in ブログ | この記事のURI

広告