[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル

サイト構築 -CSS

Post on:2010年7月9日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

画像の四辺をシンプルな1pxのボーダーではなく、一味違ったスタイルにするチュートリアルを紹介します。

Fancy Inset CSS Image Borders
デモ
※キャプチャは500%拡大

拡大では分かりにくいと思うので、全景は下記をどうぞ。

デモのキャプチャ（100%）
※クリックで全表示

実装は下記のようになります。

HTML

疑似要素「:after」を使用するため、spanでimg要素を内包します。

<textarea name="code" class="html" cols="60" rows="5">
<span class="fancy">< img src="dingo.jpg" /></span>
</textarea>

</textarea>

CSS

疑似要素「:after」を使用して、スタイルを適用します。

<textarea name="code" class="css" cols="60" rows="5">
span,img{padding:0;margin:0;border:0;}

.fancy{
	position:relative;
	display:inline-block;
	font-size:0;
	line-height:0;
}

.fancy:after{
	position:absolute;
	top:1px;
	left:1px;
	bottom:1px;
	right:1px;
	border:1px solid rgba(255,255,255,0.5);
	outline:1px solid rgba(0,0,0,0.2);
	content:" ";
}
</textarea>