【CSS】画像をポラロイド風に装飾してみる

画像を少し凝って見せたいとき、１つ１つ画像を加工するのは大変です。
CSSを使って手軽に一括加工してみましょう。

この画像をもとに作ってみます。

シンプルな写真風に画像を装飾する

HTML

<img class="photo" src="https://site-manage.net/wp-content/uploads/css_img_photo_sample.gif" />

CSS

.photo {
	padding: 8px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #c2c2c2;
	border-right: 1px solid #c2c2c2;
	/* IE */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true)";
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true); /* IE5.5+ */
	background: #fff;
}

シンプルですね。

ポラロイド風に画像を装飾する

下にタイトルやちょっとした一言を入力することもできます。

HTML

<div class="photo02">
	<p>CSSだけでポラロイド風に見せられます(・ω・*)</p>
	<img src="https://site-manage.net/wp-content/uploads/css_img_photo_sample.gif" />
</div>

CSS

* {margin: 0;}
.photo02 {
	width: 400px; /* imgと合わせます */
	position: relative;
	padding: 8px;
	padding-bottom: 40px;
	border: 1px solid #ccc;
	-webkit-box-shadow: 3px 3px 3px #ccc;
	   -moz-box-shadow: 3px 3px 3px #ccc;
	        box-shadow: 3px 3px 3px #ccc;
	/* IE */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true)";
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true); /* IE5.5+ */
	background: #fff;
}
.photo02 img {
	width: 400px; /* .photo02と合わせます */
}
.photo02 p {
	position: absolute;
	height: 24px;
	line-height: 24px;
	bottom: 8px;
	font-size: 14px;
	color: #666;
}

フォントを指定するとよりおしゃれになるかもしれません。

IEでは box-shadow が使えないため filter で代用しました。
もう少し凝って影を見せたり、ライブラリを使ってIEでも見れるようにする方法もありますが、
それは後々紹介したいと思います。