CSSを使って画像を装飾する5つの方法 │ これからゆっくり考L +α

CSSを使って画像を装飾する5つの方法

Photoshopで加工せずとも、CSSのみでそこそこの画像装飾ができます。

こういうのを駆使してサイトを構築しておくと、更新業務もかなり楽になりそうですね。

Drop Shadow Effect

background-imageとpaddingで表現

→サンプルページ

CSS

img {
  background:url(bg_shadow.jpg) no-repeat right bottom;
  padding:5px 15px 15px 5px;
}

HTML

<img src="sample_img.jpg" alt="" width="300" height="213" />

Double Border Effect

borderとbackground-colorを使って、2重線を表現

→サンプルページ

CSS

img {
  border: 5px solid #ddd;
  padding: 5px; /*Inner border size*/
  background: #fff; /*Inner border color*/
}

HTML

<img src="sample_img.jpg" alt="" width="300" height="213" />

Framed Image Effect

imgの上に枠の画像（png）を重ねる
※IE6に対応させるためには別途処理が必要

→サンプルページ

CSS

#sampleImg {
  position: relative;
  display: block;
  width: 300px;
  height: 213px;
  margin:0 auto;
}
#sampleImg span {
  background: url(frame.png) no-repeat center top;
  width: 300px;
  height: 213px;
  display: block;
  position: absolute;
}

HTML

<p id="sampleImg">
<span>&nbsp;</span>
<img src="sample_img.jpg" alt="" width="300" height="213" />
</p>

Watermark Effect

imgを75%の濃度で表示させ（ちょっと透ける）、background-imageがほんのり見える

→サンプルページ

CSS

#sampleImg {
  background: #000 url(line.gif) no-repeat;
  width: 300px;
  height: 213px;
  margin:0 auto;
}
#sampleImg img {
  filter:alpha(opacity=75);
  opacity:0.75;
}

HTML

<p id="sampleImg">
<img src="sample_img.jpg" alt="" width="300" height="213" />
</p>

Image with Caption

imgの上にキャプションを表示
キャプションの背景色の濃度を55%にして、imgがちょっと透けて見える

→サンプルページ

CSS

#sampleImg {
  position: relative;
  display: block;
  height:213px;
  width: 300px;
  margin:0 auto;
}
#sampleImg cite {
  background: #111;
  filter:alpha(opacity=55);
  opacity:0.55;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 280px;
  padding: 10px;
  border-top: 1px solid #999;
  font-size:small;
  font-style:normal;
}

HTML

<div id="sampleImg">
<img src="sample_img.jpg" alt="" width="300" height="213" />
<cite>実家のわんこです。お昼寝中。</cite>
</div>

参照元
5 Ways to Spice up Your Images with CSS