Comment on Que son los sprites en css y como usarlos? by Alberto

Los sprites son muy usados hoy en día en el diseño web, en este post explicaremos lo básico sobre ellos .

Los sprites son imágenes destinadas a ahorrarte tiempo de carga a la hora de llamar las imágenes en tu sitio web. Cada sprite está compuesto por un conjunto de pequeñas imágenes.
Tomemos como ejemplo el portal de videos Youtube, el cual tiene muchos iconos e imágenes(más de 20).
En lugar de llamar a cada uno, se llama una única imagen que contenga todas esas pequeñas imágenes.

La imagen completa que usa Youtube es mucho más grande y vertical, si quieren hacerse una idea este es la imagen.

Ahora que ya vimos de que se trata, veamos como usarlos. Para ello tomaremos la misma imagen que coloqué arriba.
Una forma muy común de usar iconos es que estos cambien después de realizada una acción. Para el ejemplo, haremos que ese cambio sea al colocar el ratón sobre la imagen.

Estas dos imágenes son el resultado de usar el sprite de arriba como imagen única pero utilizando algo de magia CSS.
El código en su forma más simple, quedaría así:
HTML

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.conSprite a
{
background:url('C:\Users\Mauro\Desktop\PROYECTOS\PROYECTO PROMETEUS\AUTOBLOGS\ABS\Auto Blog Samurai\data\Recursos Internet y Programacion\1\spriteyoutube.png');
width:16px;
height:19px;
display:block;
}
.conSprite #hand:hover
{
background-position:  -136px -58px ;
}
.conSprite #hand2:hover
{
background-position:  -136px -18px;
}

Como habrán podido notar en el código, solamente llamamos una imagen: el sprite y la utilizamos en los enlaces. Pero cambiando la posición de la imagen, para esto debemos conocer la posición inicial de cada “icono” o imagen a mostrar.
Para mostrar cada imagen, tenemos en cuenta:

Posicion “X” “Y” donde empieza la imagen(background-position).Si los números son negativos en X, nos dirigimos hacia la derecha del sprite, si son positivos; hacia la izquierda.Si los números son negativos en Y, nos dirigimos hacia la abajo en el sprite, si son positivos; hacia arriba.Por regla general, los números se toman negativos y se empieza desde la esquina superior izquierda del sprite.Debemos darle un tamaño con width y height para que sólo se muestre la imagen deseada.

Para crear un sprite se puede usar un editor de imágenes para unir todos los iconos en una sola imagen. Pero deben de anotar la posición y tamaño de cada imagen para usarlos después en el CSS.
Sin embargo existen herramientas para crear sprites online, como CssSprites.

Con esta herramienta sólo tienes que seleccionar las imágenes desde tu computador y luego darle a “Generate” para crear el sprite.

Recuerda usar imágenes pequeñas y ligeras.Usa hasta 19 imágenes.Si quieres usar más de 19, crear otro grupo de 19 y luego únelos.

Como resultado te dará la imagen e incluso te indicará la posición(background-position) donde empieza cada imagen. Realmente es una gran ayuda.

Usar sprites es mayormente recomendado para sitios con muchas visitas donde tengas muchas imágenes o iconos y los uses repetidamente por todo tu sitio web.
El tener todas tus imágenes en sprites hace que llamen un conjunto de imágenes en un sólo archivo(una sola imagen). Si por ejemplo tienes 10 iconos, para cargarlos necesitas hacer 10 peticiones al servidor y cada una demora un tiempo, lo cual hace esperar más tiempo al visitante.
Si tienes más de 10 es peor. Con un sprite acortas a una sola petición y reduces el tiempo de carga .

Espero les sirva a los que necesiten y lo usen cuando sea necesario. Tampoco es una obligación usarlos en toda web y recuerden que no sirve de mucho si las imágenes que quieren convertir en un sprite son muy grandes o pesadas.

Si no te quieres perder ningún detalle de estos artículos, suscríbete a mi feed con tu lector preferido o vía email en la parte derecha de la página.

que son los sprites que es un sprite imagen usar sprites css usando sprites css juntar dibujos dentro pagina web que es un sprite que es un sprite de imagenes usar imagenes con css QUE ES UN SPRITES Y COMO SE CREA UNO usar background in css sprites

View the original article here