Sprites CSS
Bien ha llegado la hora de hablar seriamente. Está bien, no tanto, esto se trata de que cualquiera que se esté introduciendo en el mundo del desarrollo web sea capaz de entenderlo. Les hablaré de lo que son los sprites en css.
Un sprite en css es una ‘gran’ imagen que contiene muchas imagenes pequeñas, por lo regular contiene los estados de on y de off de las imagenes y es usado generalmente para los botones, aunque puede darsele cualquier utilidad a esta ‘técnica’.
¿Pero, no es mejor tener muchas imagenes pequeñas que una de gran tamaño?
Cada imagen en un ” < img >” o embebida en el CSS provoca una http request, (una peticion http para los que no entienden anglosajón 
). Cada vez que se hace una peticion http la carga de la página se va haciendo más lenta. Pero esto puede mejorar.
Por lo regular al hacer un lista, usariamos dos graficos para cada item, uno para el estado en reposo (off) y otro para el estado activo (on).
Y nuestro codigo luciría mas o menos así.
#lista li a.item1{background: url(imagen1.gif);}
#lista li a:hover.item1{background: url(imagen2.gif);}
#lista li a.item2{background: url(imagen1_item2.gif);}
#lista li a:hover.item2{background: url(imagen2_item2.gif);}
...
Desventaja de esto:
Solución
Juntar todas las imagenes en una sola y hacer uso de la propiedad background-position
Juntamos las imagenes como querramos, ya sea en horizontal o vertical, en este caso en vertical, y obtenemos una imagen de 32px de ancho por 128px de alto.
Y en el css:
#lista li a{background:url(imagen1.gif)}
#lista li a.item1{background-position: 0 0;}
#lista li a:hover.item1{background-position: 0 -32px;}
...
De esta forma estamos especificando que todos los items tendrán el mismo fondo, solo lo iremos posicionando el fondo de acuerdo al item, así mostraremos una imagen diferente. Por ejemplo al pasar el cursor sobre el primer item, se le dice al css que mueva el fondo 32px hacia arriba en el eje de las Y, de está forma se mostrará la imagen que sigue pasando esos 32px, en esta ocasión la imagen en estado activo (on)
Ventajas de esto:
Un ejemplo de su uso :
www.yahoo.com | http://l.yimg.com/a/ … large-sprite_1.1.png
Solo 12kb 
Add comment
Fill out the form below to add your own comments
A la mierda no tenia idea de esto, es más no tengo la más minima idea de nada de diseño
Pero que bueno che, ya lo voy a probar algun día
Saludos
es facil de entender sabiendo css y algo de photoshop
Sé solo lo básico de CSS, es lamentable, pero no me dan ganas de aprender
Estimado donde me descargo este theme que me ha gustado.
disculpa, es que aun no tengo terminado este, tengo que hacerle algunas correciones. cuando lo acabé lo subiré, junto con otros dos
estoy tratando de reducir la hoja de estilo, puesto que me ha quedado gigantesca
Ok , pero de verdad me ha gustado, salvo por un detalle , la barrera anti spam no aparece por ningún lado .
Saludos
ah, es que no la tengo habilitada ya que activé el antispam de akismet, pero el theme no tiene que ver
ok, te esta quedando super bueno, lo que pusiste arriba con la última actividad es genial .
saludos
Una maravilla este theme eh!
Needed to draft you that very small remark just to say thanks a lot again on your splendid knowledge you have contributed in this article. It’s really shockingly open-handed of people like you to offer unhampered just what numerous people would’ve distributed for an electronic book to help with making some profit for their own end, notably considering that you might well have done it if you decided. The inspiring ideas additionally acted like a easy way to understand that someone else have the same eagerness the same as my own to grasp more and more when considering this issue. I’m certain there are millions of more enjoyable situations in the future for individuals that look over your site.