写真に枠線をつけてポラロイド風

写真をただ貼りつけるよりも、
少しの工夫で面白くみせることができます。

例えばCSSで枠線をつけるだけで、
淵つきのポラロイド写真のように見えるから不思議ですよね。

<head>〜</head>の間に
<style TYPE="text/css">
<!--

-->
</style>

と書いてから、

CSSは、
.test1 img {
padding: 5px 5px 15px 5px;
border: 1px solid #ccc;
}
HTMLは、
<div class="test1">
<img src="任意の画像" />
</div>

すると、以下のような表示になります。

工夫をすると、白い余白のところに、 文字(キャプション)も載せられます。

CSSは以下のように記述。
.test2{
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.test2 span {
padding: 5px;
display: block;
}

HTMLは以下のように記述
<div class="test2">
<img src="任意の画像" /><br />
<span>
サンプルのキャプションです</span>
</div>

すると以下のような表現ができます。


サンプルのキャプションです

線の太さを変えたりすると、色々表現できそうですね。

素材のトップへ

スポンサードリンク

スポンサードリンク

SOZAI | 素材

その他