CSS sprite: la tecnica

La tecnica delle sprite CSS è una tecnica che prevede l'uso di immagini di sfondo. Più precisamente, riguarda l'uso di un'unica immagine di sfondo che a sua volta contiene altre immagini. Le immagini vengono visualizzate quindi sugli elementi utilizzando la proprietà background-position che permette di visualizzare un'unica immagine alla volta. Vengono utilizzate le coordinate x e y (asse orizzontale e verticale) di tale proprietà per selezionare solo una data porzione dell'immagine di sfondo che corrisponde alla posizione di una singola immagine. In questo articolo esploreremo i dettagli di tale tecnica.

Si supponga di avere la seguente sprite:

Questa immagine è alta 172 pixel e larga 42 pixel. Al suo interno sono contenute quattro immagini. Quello che dobbiamo fare adesso è calcolare le coordinate dell'asse verticale per ciascuna immagine partendo dall'alto. Otterremo i seguenti valori:

[caption id="attachment_838" align="alignnone" width="100" caption="Le distanze verticali tra le immagini che compongono la sprite."][/caption]

Per mostrare ciascuna immagine dobbiamo fare in modo che l'elemento che ospiterà l'immagine abbia delle dimensioni tali da poter visualizzare solo un'immagine alla volta, senza mostrare altre parti di altre immagini:

#social {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 43px;
}

#social li {
	width: 42px;
	height: 100%;
	margin-right: 0.5em;
	float: left;
}

#social li a {
	float: left;
	width: 100%;
	height: 100%;
	text-indent: -1000em;
    background-image: url(social.png);
    background-repeat: no-repeat;
}

Su ciascun link è stata impostata come immagine di sfondo l'intera sprite. Conoscendo le coordinate verticali di ciascuna immagine, possiamo utilizzare la proprietà background-position per visualizzarle. Teniamo presente che i valori di questa proprietà partono da sinistra verso destra per l'asse orizzontale e dall'alto in basso per quello verticale. Per ottenere l'effetto che vogliamo, ossia quello di visualizzare un'immagine alla volta sui link, dobbiamo quindi usare valori negativi:

#social li #twitter {
	background-position: 0 -43px;
}

#social li #flickr {
	background-position: 0 0;
}

#social li #digg {
	background-position: 0 -82px;
}

#social li #delicious {
	background-position: 0 -129px;
}

Potete visionare l'esempio finale in questa pagina.