[CSS]背景画像を使用しないCSSスプライトのテクニック

Post on:2010年6月7日

HTML

※簡略化しています。

<textarea name="code" class="html" cols="60" rows="5">
<div class="affiliates">
	<a href="#"><img src="rokkan.gif" alt="" /></a>
	<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>
</textarea>

</div>

</textarea>

使用している画像（右）は、マウスホバー時とあわさった一枚の画像です。

使用している画像

CSSではCSSスプライトは背景画像の位置変更ではなく、「overflow: hidden;」を使用しています。

CSS

正確なwidthとheightの値が必要で、初期表示のために「margin-top」を使用します。

<textarea name="code" class="css" cols="60" rows="5">
.affiliates a {
	width: 204px; height:182px; 
	overflow: hidden;
	float: left;
}
.affiliates img {
	border: none;
}
.affiliates a:hover img {
	margin-top: -182px;
}
</textarea>

.affiliates a {

width: 204px; height:182px;

overflow: hidden;

float: left;

}

.affiliates img {

border: none;

}

.affiliates a:hover img {

margin-top: -182px;

}

</textarea>

また、上記のものにCSS3のtransitionを使用し、スライドするエフェクトを加えたテクニックも紹介されています。
対応ブラウザはChrome, Safari, Operaで、Firefoxは4で対応予定です。

CSS3版のキャプチャ

CSS：CSS3版

スタイルシートは、L.8-11が追加された箇所です。

<textarea name="code" class="html" cols="60" rows="5">
.affiliates a {
	width: 204px; height:182px;
	overflow: hidden;
	float: left;
}
.affiliates img {
	border: none;
	margin: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
	margin-top: -182px;
}
</textarea>