Lo de hoy… es mientras mas rapido cargue una web mejor… y que mejor manera de ayudarnos a lograr este reto… con CSS… ya que con la tecnica SPRITES aplicada a nuestros CSS… y al mostrar una serie de imagenes… y envez de cargarlas una por una… haremos una sola imagen… que contenga todas las “imagenes” (valga la redundancia) a mostrar…
El truco… es envez de usar muchas imagenes creamos una sola y con css… la usamos como fondo y alineamos cada imagen para dar el efecto de “varias imagenes”… pero en realidad es una sola…
un buen ejemplo es Gmail
Que carga todas sus imagenes en un solo archivo…
otro ejemplo mas complejo esta eh Yahoo
Y lo mas hermoso de todo que es compatible con FCK IE6
Codigo HTML para – CSS Sprites
1 2 3 4 5 | <ul class="menu"> <li><a href="http://zacss.com" class="mn1" title="Zona"></a></li> <li><a href="http://zacss.com" class="mn2" title="Del Arte"></a></li> <li><a href="http://zacss.com" class="mn3" title="CSS"></a></li> </ul> |
Codigo Hoja de Estilos para – CSS Sprites
1 2 3 4 5 6 7 8 9 10 11 | .menu{left:500px;margin-left:-250px;position:absolute;top:50px;width:500px;display:block;} .menu li{display:inline;} .mn1, .mn2, .mn3{height:131px;width:138px;background:url(img_sprite_css.jpg);display:block;float:left;margin:0 10px;} /*Dejo vacia y sin posicion aqui ya que en este caso la imagen que deseamos se encuentra en "0 0" o bien la posicion que queremos*/ .mn1{} /*Ahora si es importante ya que con el "hover" la posicion tiene que cambiar y debemos darsela de la siguiente manera*/ .mn1:hover{background-position:0 131px;} .mn2{background-position:138px 0;} .mn2:hover{background-position:138px 131px;} .mn3{background-position:283px 0;} .mn3:hover{background-position:283px 131px;} |
Recordemos que al indicar las posiciones o “coordenadas” en CSS el primer valor es “X(horizontal)” y el segundo valor es “Y(vertical)”.
Compartir
Buen aporte pero una recomendacion seria que pasen un link del ejemplo por eso de hasta no ver no creer … ok ok jejeej les pongo un 10 (y)
Gracias Maumas por tu observacion… pero si esta “Ver demo en linea” y nunca publicamos o publicaremos cosas fakes o que no funcionan… trataremos de hacer mas visible ver demo y colocar un boton para descargar el ejemplo… chao y sigue visitandonos!!!