CSS Sprites: La fine dello "slice" (taglio) sulle immagini?
Tecnica di posizionamento delle immagini su Youtube
Questo esempio ricrea la tecnica usata da molti portali (ad esempio youtube) per il posizionamento di bottoni, immagini e altro.
Analizzando il css di Youtube (sono 5526 linee di codice) si scoprono diverse cose interessanti come ad esempio, che utilizzano solo un paio di immagini per tutta la grafica. Solo due immagini in formato gif che contengono tutto!
E quest'altro file:
E' una tecnica gia usata ampiamente per costruire bottoni e menu: in un unico file si mette la grafica dei diversi stadi del bottone impilati uno sotto l'altro e poi tramite il css li si fa spostare in alto e in basso a seconda delle necessità.
Ma il caso di youtube (e altri) è diverso per due motivi:
1) le immagini NON son impilate verticalmente: si può obiettare che questo non è un problema: vero! ma come si fa a limitare l'area che si desidera impiegare come sfondo? Si potrebbe pensare a un div contenente lo sfondo ma questo complicherebbe inutilmente il codice. Nessun div per lo sfondo ma....
2) il file che contenente la grafica va a "sostituire" delle immagini trasparenti! Provate qui sotto a salvare le immagini: non ci riuscirete! Salverete solo la gif trasparente che fa da "segna posto" e le cui dimensioni sono impostate alla dimensione dello sfondo visualizzato
Facebook
In pratica cosa succede?
A) Ho piazzato una gif trasparente dove voglio che compaia la vera immagine
B) Ho dato la dimensione alla gif trasparente (l'ho fatto tramite css ma si puo fare direttamente nel codice.. è la stessa cosa)
C) tramite il css sono andato a piazzare lo sfondo con le apposite coordinate nell'immagine trasparente. NOTA.. il no-repeat non servirebbe neppure.. l'immagine di background NON SI RIPETERA' al di fuori della gif trasparente!
Understend? è qui la chiave di tutto.
Che vantaggi ha questa tecnica?
eh.. questo non mi è ancora del tutto chiaro: sicuramente esiste un vantaggio in termini di carico del server: al posto di richiamare 200 immagini ne carico una sola seppur più pesante. Non ho neppure bisogno del preload per gli stadi Acceso/Spento dei bottoni.
Tutto qui? Apparentemente si.. Ma è possibile che vi sia un automatismo dietro tutto questo e che le immagini della gif grande siano in qualche modo indicizzate e il css generato automaticamente in base a coordinate della gif (però mi sembra improbabile).
Di seguito il codice che ho creato per questo tutorial sul "rimpiazzamento delle immagini".
Ciao -
Torna al sito
#blocco-icone{
background-color:#EEF;
border:3px solid #C00;
width:300px;
height:100px;
float:left;
margin:20px;
padding:5px;
}
#blocco-icone ul{
padding:0;
margin: 0;
list-style-type: none;
white-space: nowrap;
}
#blocco-icone ul li{
padding:0;
margin:0 10px 10px 0;
height:18px;
display: block;
float: left;
}
#blocco-icone ul li a{
text-decoration:none;
color:#333333;
width:80px;
display:block;
border:1px solid #CCCCCC;
background-color:#eee;
font-size:11px;
}
#blocco-icone ul li a:hover{
color:#FC0;
display:block;
border:1px solid #FC0;
background-color:#FFF;
}
#blocco-icone ul li img{
/* l'immagine in questione e un gif traparente di 1px */
/* la spazio e della dimensione delle icone che andranno a "sovrapporsi" */
width:14px;
height:14px;
margin:1px;
vertical-align:top;
border:none;
}
.ico-facebook img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -241px -17px;
}
.ico-facebook:hover img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -241px -1px;
}
.ico-delicious img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -209px -17px;
}
.ico-delicious:hover img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -209px -1px;
}
.ico-flash img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -257px -17px;
}
.ico-flash:hover img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -257px -1px;
}
.ico-elefante img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -513px -17px;
}
.ico-elefante:hover img{
background:transparent url(../gr/sharing_icons-vfl59811.gif) no-repeat -513px -1px;
}
------------------
codice pagina
<div id="blocco-icone">
<ul>
<li class="ico-facebook"><a href="http://www.facebook.com"><img src="gr/blank.gif" />Facebook</a></li>
<li class="ico-delicious"><a href="http://www.facebook.com"><img src="gr/blank.gif" />Delicious</a></li>
<li class="ico-flash"><a href="http://www.facebook.com"><img src="gr/blank.gif" />Flash</a></li>
<li class="ico-elefante"><a href="http://www.aton-ra.com"><img src="gr/blank.gif" />Elefante</a></li>
</ul>
</div>