[CSS]画像に枠線やウォーターマーク、キャプションをつけるスタイルシート
Post on:2008年12月4日
sponsors
TORRANCE WEB DESIGNのエントリーから、画像に枠線やウォーターマーク、キャプションをつけるスタイルシートを紹介します。
5 Ways to Spice up Your Images with CSS
Drop Shadow Effect
画像を使用し、ドロップシャドウのエフェクトを適用します。
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <img class="shadow" src="sample.jpg" alt="" /> </textarea> |
CSS
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> img.shadow { background: url(shadow-1000x1000.gif) no-repeat right bottom; padding: 5px 10px 10px 5px; } </textarea> |
Double Border Effect
paddingを指定し、ボーダーが二重にあるようなエフェクトを適用します。
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <img class="double-border" src="sample.jpg" alt="" /> </textarea> |
CSS
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> img.double-border { border: 5px solid #ddd; padding: 5px; /*Inner border size*/ background: #fff; /*Inner border color*/ } </textarea> |
Framed Image Effect
空spanと画像を使用し、フレームのエフェクトを適用します。
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="frame-block"> <span> </span> <img src="sample.jpg" alt="" /> </div> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea name="code" class="css" cols="60" rows="5"> .frame-block { position: relative; display: block; height:335px; width: 575px; } .frame-block span { background: url(frame.png) no-repeat center top; height:335px; width: 575px; display: block; position: absolute; } </textarea> |
Watermark Effect
半透明の画像を使用し、ウォーターマークのエフェクトを適用します。
HTML
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="transp-block"> <img class="transparent" src="sample.jpg" alt="" /> </div> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="css" cols="60" rows="5"> .transp-block { background: #000 url(watermark.jpg) no-repeat; width: 575px; height: 335px; } img.transparent { -moz-opacity:.75; filter:alpha(opacity=75); opacity:.75; } </textarea> |
Image with Caption
半透明のキャプションを画像に重ねます。
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="img-desc"> <img src="sample.jpg" alt="" /> <cite>Salone del mobile Milano, April 2008 - Peeta</cite> </div> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<textarea name="code" class="css" cols="60" rows="5"> .img-desc { position: relative; display: block; height:335px; width: 575px; } .img-desc cite { background: #111; -moz-opacity:.55; filter:alpha(opacity=55); opacity:.55; color: #fff; position: absolute; bottom: 0; left: 0; width: 555px; padding: 10px; border-top: 1px solid #999; } </textarea> |
sponsors
