CSS sprite e icone dei social network

Possiamo gestire con la tecnica delle sprite CSS le icone dei vari social network, creando ad esempio un effetto di rollover per evidenziare lo stato attivo di un'icona. Questa tecnica è vantaggiosa perchè ci permette di avere in un unico file tutte le icone richieste, dimezzando così i tempi di caricamento nei browser. Vediamo i dettagli.

Partiamo dalla seguente marcatura:

<ul id="socialize">
	<li><a href="#" id="twitter">Twitter</a></li>
	<li><a href="#" id="facebook">Facebook</a></li>
</ul>

Condensiamo tutte le icone (attive ed inattive) in un'unica immagine in cui ciascuna icona ha le dimensioni di 32 x 32 pixel:

Assegniamo quindi degli stili di base alla lista, alle sue voci e ai link:

#socialize {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100px;
	height: 32px;
}

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

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

L'immagine è stata impostata come sfondo dei link. Dato che ciascun link ha le stesse dimensioni di un'icona, verrà visualizzata solo una sola icona per ciascun link. Inoltre il testo del link è stato nascosto tramite l'indentazione negativa del testo.

Per mostrare le icone che vogliamo dobbiamo usare i valori x e y della proprietà background-position. Normalmente questi valori vanno da sinistra verso destra per l'asse x e dall'alto in basso per l'asse y. Noi invece abbiamo bisogno di mostrare anche le icone inattive, quindi useremo valori negativi che vanno in direzione opposta:

#twitter {
	background-position: 0 -32px;
}
#twitter:hover {
	background-position: 0 0;
}

#facebook {
	background-position: -64px -32px;
}

#facebook:hover {
	background-position: -64px 0;
}

Lo stato normale dei link mostra le icone inattive sulla seconda riga dell'immagine. Dato che un'icona è alta 32 pixel, dobbiamo usare questo valore ma in negativo (direzione dal basso in alto). Allo stesso modo dato che un'icona è larga 32 pixel, per ottenere l'icona di Facebook dobbiamo spostarci di due icone verso destra, quindi di 64 pixel usati con valore negativo (da destra verso sinistra).

Potete visionare l'esempio finale in questa pagina.