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

背景画像を使用せずに、img要素に直接配置した画像でCSSスプライトを実装するテクニックを紹介します。

デモのキャプチャ

CSS Sprites w/out Using Background Images
デモ

画像にマウスホバーをすると、表示画像が変わります。

デモのキャプチャ

右の画像にマウスホバーしたキャプチャ

デモでは上記の画像二つはimg要素で配置されています。

HTML

※簡略化しています。

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

デモのキャプチャ

使用している画像

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

CSS

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

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

デモのキャプチャ

CSS3版のキャプチャ

CSS:CSS3版

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

top of page

©2017 coliss