2005-01-09

[俺memo] CSSを使って、画像(写真)に影をつける

 

この日記に載せてる写真に影を付けたいなーと思って、ソフトを探していた所、「花と写真とblogと。」さんに CSSを使った方法が載っていました。今は新サイトに移行しているとの事ですので、万が一サイトが消えた事を考えて、こちらの方にも引用します。

(1)CSSファイルに追加するもの。
.eimg
{
	margin: 0px 1em 1em 0px;
	background: url(影の画像までのパス) bottom right;
	float: left;
	width: auto;
}
.eimg img
{
	background: #ffffff;
	border: 1px solid #999;
	padding:5px;
	position: relative;
	left: -7px;
	top: -7px;
}

(2)エントリー時に画像をUPしたらその画像を以下のようにする。  <div class="eimg">画像のソース</div>
(3)画像は最初から左に回りこみになっているので、 <br clear="left" /> のように解除をすること。

影のイメージは、コレです。右クリックで保存して自サイト用に使用します。

[]