30
2009
CSS Sprites – Cargar mas rapido tu pagina con CSS
An article by 
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)”.
2 Comments + Add Comment
Leave a comment
Patrocinador
Siguenos
Suscribete
Correo @zoneartcss.com
Comentarios
- juan manuel en Subdominios con php y .htaccess
- PCHART-Crear gráficas en PHP | Espacio de *M@?!*[lOs KeRoS mUcHo a ToDoS...] en Pchart – Crear gráficas en PHP
- EH en Evitar resize de un textarea con CSS
- KAREN en Envia mensajes de texto gratis a celulares telcel
- Elie Cottage en Ventajas y desventajas de tener un blog gratis
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!!!
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)