昔の写真みたいな画像枠をつけるCSS

CSSで写真に白枠をつける

今日は芸術鑑賞会でした。竹久夢二展なかなか良かったです。

10月27日まで水戸近代美術館で開催してます。

全く美術とは関係ないのですが、スタイルシートで昔の写真ぽい白枠をつけた表示にできないかと思い考えてみました。

HTML部分divタグpictureというクラスを作って利用します。
その中にimgタグタイトル用のpタグ(クラス名title)を含めておきます。

<div class="picture">
	<p>
		<img src="http://farm8.staticflickr.com/7297/12398465685_8536645486_n.jpg" width="320" height="239" alt="2014-02-09 at 11.53.39">
	</p>
	<p class="title">くまモンの蒸しパン</p>
</div>

CSSでは、pictureクラスのdivタグのdisplayプロパティinline-blockを指定するところがポイントです。
こうするとボックス部分がサイトの幅に合わせて均等に横並びになります。
それっぽく見せるために枠に影(box-shadow)もつけておきます。

.picture{
	margin: 10px;
	display: inline-block; 
	border: 1px solid #fff;
	padding: 0;
	box-shadow: #aaa 3pt 3pt 7pt;
}

画像タグには余白(padding)を入れて白い枠っぽく見えるようにします。

.picture img{
	margin: 0;
	padding: 10px;
}

今回画像の下に画像を説明するようなタイトル部分を入れたかったので、下余白(padding-bottom)を少し取って文字を写真に対し中央ぞろえ(text-align:center)になるようにしました。

.picture > .title{		/* タイトル部分 */
	padding-bottom: 10px;
	font-size: 12px;
	width: 100%;
	text-align: center;
}

いかがでしょうか?
それっぽく見せるという部分はパソコンならではの考え方で、わたしは結構好きです。

コメントを残す

メールアドレスが公開されることはありません。