Qualche giorno fa sono venuto a conoscenza di una tecnica assolutamente particolare per creare gli sprites CSS senza utilizzare la proprietà background-image. Il concetto di fondo è realmente molto più semplice rispetto a quello che sta alla base della tecnica tradizionale e permette di realizzare menù con rollover e quant’altro in tempi davvero rapidi. Vediamo quindi come si procede:
Innanzitutto dobbiamo realizzare il nostro png allo stesso modo con cui realizzeremmo uno sprite normale quindi prestando massima attenzione e segnandoci le misure che ci occorrono. Nel caso d’esempio ho realizzato un’immagine di 160×100 pixel “divisa” immaginariamente a metà orizzontalmente in modo che a 50px dal bortdo superiore finisca il primo elemento ed inizi il secondo:
A questo punto possiamo passare a realizzare il codice necessario. L’xhtml consisterà in un semplice div contenente il nostro link con l’immagine:
<div class="sprite-css">
<a href="#" title="Sprite CSS senza background-imag"><img src="sprite-test.png" alt="Sprite CSS senza background-image" width="160" height="100" /></a>
</div>Come possiamo vedere l’altezza e la larghezza dichiarate nel tag <img> sono quelle dell’immagine complessiva comprendente entrambi i pulsanti che andremo a “nascondere” via css:
* {
margin:0;
padding:0;
border:0;
}
.sprite-css a{
display:block;
width:160px;
height:50px;
overflow:hidden;
}
.sprite-css a:hover img {
margin-top: -50px;
}Le prime 5 righe si occupano semplicemente di resettare margini, padding e bordi (per non vedere il bordo intorno alle immagini con link). Successivamente non abbiamo fatto altro che dire di mostrarci solamente i primi 50px di altezza dell’immagine (ricordiamoci che la posizione viene calcolata partendo dall’angolo in alto a sinistra) e di nascondere (overflow:hidden per non mostrare scrollbar) il resto. L’ultima dichiarazione invece ci dice che al passaggio del mouse dovranno essere mostrati i 50px inferiori (e quindi in secondo bottone). Il concetto è molto semplice, lascio a voi ogni sperimentazione e test in attesa dei vostri commenti!
Un generatore di CSS gratuito in italiano
Se tuttavia stiamo invece cercando la soluzione tradizionale, possiamo ricorrere a questo generatore di sprites css in italiano gratuito!
