consulta sprite

alfcm · #1 (**permalink**) 06/01/2012, 14:46

hola a todos, estoy empezando a usar sprite, pero me tengo una duda

este es mi html con dos divs, y en cada una va una imagen

Código HTML:

Ver original<html>
<body>
<div id="header_logo"></div>
<div id="header_title"></div>
</body>
</html>

mi css con sprite es

Código CSS:

Ver original#header_logo{
    background:url(../img/misprite.png) no-repeat 0px -230px;
    display:block;
    float:left;
    height:150px;
    width:130px;
    margin-bottom:-40px;
}
#header_title{
    padding:10px;
    padding-top:0;
    width:200px;
    font:bold 35px;
    float:left;
    height:82px;
    background:url(../img/misprite.png) no-repeat 0px -110px;
}

mi duda es en el CSS, tengo #header_logo y #header_title, cada uno esta llamando al archivo misprite.png.

Este es un ejemplo de internet

Código CSS:

Ver original/* las propiedades generales */
a.iconos {
  background:transparent url(URL_IMAGEN) no-repeat 0px 0px;
  display: block;
  height: 16px;
  width: 16px;
}
 
/* las propiedades de cada uno de los íconos */
a.icono1 {background-position: 0px 0px;}
a.icono2 {background-position: -16px 0px;}
a.icono3 {background-position: -32px 0px;}
 
/* las propiedades de los íconos con efecto hover */
a.icono1:hover {background-position: 0px -16px;}
a.icono2:hover {background-position: -16px -16px;}
a.icono3:hover {background-position: -32px -16px;}

aqui veo que solamente carga una vez la imagen a.iconos {background:transparent url(URL_IMAGEN) no-repeat 0px 0px;}

NO ESTOY MUY SEGURO SI LO MIO ESTA BIEN APLICADO CON RESPECTO A LOS SPRITE

Agradeceria su respuesta y mas aun con consejos para aplicar los sprite

cristian_cena · #2 (**permalink**) 06/01/2012, 21:05

Por una cuestión de comodidad creamos clases y le pasamos el background (image y repeat) a todas juntas. y luego damos el width, height y backgroun-position a cada clase por separado.

Esto no quita que lo puedas hacer con #id's o que pases el background por cada elemento como lo vienes haciendo. Seguro que no va a ser lo más práctico, pero también va a funcionar.

Espero te sea de ayuda. Saludos.

alfcm · #3 (**permalink**) 08/01/2012, 05:59

gracias por la respuesta CRISTIAN, pero comparando los dos ejemplos, en rendimiento, en llamadas request al servidor, cual de los dos es mas recomendable?

gracias nuevamente por la respuesta

cristian_cena · #4 (**permalink**) 09/01/2012, 16:06

bueno, supongo que la 2da forma será mejor porque llamas solo una vez la imagen, además de lucir más prolijo y de ser más mantenible por el hecho de tener una imagen por cada clase.

Personalmente opto por hacer mis sprites de la segunda forma. es decir:

Código CSS:

Ver original.clase1, .clase2, .claseN{
background:url("path/img.xxx") 0 0 no-repeat; 
/*... otros estilos comunes a todas las clases ...*/
}
.clase1{width:...; height:...; background-position:0 0;}
.clase2{width:...; height:...; background-position:-25px 0;}
.claseN{width:...; height:...; background-position:-50px 0; background-repeat:repeat;}

Esta herramienta para crear sprites dinámicos (muy buena) también trabaja de esta forma, lo que indica que es un buen método.
Saludos.