CSS  »  Articoli  »  CSS Sprite e Image Replacement 

.sprite {background:url(../images/mySprite.png);}

	.monster {height:128px;}
	.application {height:61px;}



		/* Monsters */
		.doctor {width:103px;}
		.octopus {width:89px;}
		.wolf {width:115px; background-position:-196px -2px;}
		.star {width:126px;}
		.dog {width:128px;}

		/* Applications -*/
		.css {width:61px;}
		.activityMonitor {width:58px;}
		.dashboard {width:51px;}
		.quicktime {width:53px;}
		.scanner {width:74px;} 

Ora completiamo le altre immagini usando lo stesso metodo:

.sprite {background:url(../images/mySprite.png);}


	.monster {height:128px;}
	.application {height:61px;}


		/* Monsters */
		.doctor {width:103px; background-position:-2px -2px;}
		.octopus {width:89px; background-position:-106px -2px;}
		.wolf {width:115px; background-position:-196px -2px;}
		.star {width:126px; background-position:-312px -2px;}
		.dog {width:128px; background-position:-439px -2px;}

		/* Applications -*/
		.css {width:61px; background-position:-2px -133px;}
		.activityMonitor {width:58px; background-position:-64px -133px;}
		.dashboard {width:51px; background-position:-123px -133px;}
		.quicktime {width:53px; background-position:-175px -133px;}
		.scanner {width:74px; background-position:-229px -133px;}

Considerate il posizionamento sull'asse Y degli elementi. È lo stesso per tutti i mostri e per tutte le applicazioni. Questo perché sono allineate nella stessa posizione verticale, hanno tutte la stessa distanza dal bordo superiore.

Passo 4: il codice HTML

Definiamo come src la gif trasparente che abbiamo creato in precedenza, applichiamo le classi ed abbiamo fatto tutto!

<img src="images/transparent.gif" class="sprite monster doctor" alt="Doctor Image" />
<img src="images/transparent.gif" class="sprite monster octopus" alt="Octopus Image" />

<img src="images/transparent.gif" class="sprite monster wolf" alt="Wolf Image" />
<img src="images/transparent.gif" class="sprite monster star" alt="Star Image" />

<img src="images/transparent.gif" class="sprite monster dog" alt="Dog Image" />
<img src="images/transparent.gif" class="sprite application css" alt="Css Image" />

<img src="images/transparent.gif" class="sprite application activityMonitor" alt="ActivityMonitor Image" />
<img src="images/transparent.gif" class="sprite application dashboard" alt="Dashboard Image" />

<img src="images/transparent.gif" class="sprite application quicktime" alt="Quicktime Image" />
<img src="images/transparent.gif" class="sprite application scanner" alt="Scanner Image" />

Limiti di questo metodo

Perché un'immagine sprite con i CSS funzioni deve sempre avere una larghezza, un'altezza e una background-position definite. Se non lo fate vedrete l'intero sprite in quell'immagine.

L'esempio è disponibile per il download.

Altri articoli

Altre guide

Altre newsletter