CSS Sprites – Cargar mas rapido tu pagina con CSS

miguelortega — Fri, 31 Jul 2009 02:51:17 +0000

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

<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

.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)”.

Ver demo en linea

ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » compatible con FCK IE6

CSS Sprites – Cargar mas rapido tu pagina con CSS

Codigo HTML para – CSS Sprites

Codigo Hoja de Estilos para – CSS Sprites