Accede a tu zona privada
Jaime MM

Programación CSS3

Varios sprites CSS en una sola imagen

Varios sprites CSS en una sola imagen

21 julio, 2014   |   Jaime MM

Recomendamos a aquellos programadores que quieran saber cómo ahorrar más transferencia de datos para que sus sitios carguen rápidamente, el hacer uso de la técnica que acopla todos los sprites del sitio en una misma imagen, para que con la ayuda de códigos CSS se puedan utilizar cada uno de los  iconos contenidos dentro de esa imagen general. Gracias a esto simplemente el usuario que visita la página en cuestión deberá cargar tan solo una imagen, lo que ahorra verdaderamente la cantidad de datos que podrían transferirse.

El código que habitualmente se utiliza para poder conseguir lograr hacer uso de determinado icono ubicado en cierta imagen en particular es el background-position, es por ello que recomendamos dirigirse a W3Schools y sitios similares en donde se puede encontrar gran información de todos los factores que tienden a intervenir en esta línea de código tan utilizada.

Esta técnica también es muy utilizada por aquellos especialistas en diseño gráfico que buscan darle un estilo de hover a ciertas imágenes, para que de esa manera cuando el usuario pase el cursor por encima de estas imágenes o botones, los mismos cambiarán de estilo, y de esa forma ese efecto servirá para atraer la atención del público.

Recomendamos leer un artículo publicado en Librosweb el cual precisamente habla de los sprites y los rollovers, en donde podremos ver un claro ejemplo de su aplicación, como así también la exposición de los códigos HTML y CSS para que vean cómo funciona internamente este efecto que ayudará enormemente al encargado de la programación html5 que busca ahorrar los datos de transferencia de sus sitios. El ejemplo se aplica al caso de un portal del tiempo, en donde en una sola imagen se encuentran contenidas las diferentes posibilidades existentes de clima, como ser soleado, nublado, llovizna y tormenta, y gracias al CSS el programador puede mostrar tan solo uno de esos iconos haciendo uso de la función background-position.

Share Button
Escrito por Author Jaime MM

¿Hablamos?


Si quieres hacernos cualquier consulta o comentario, puedes enviarnos un correo a info@jaimemm.com o utilizar el siguiente formulario de contacto. Atenderemos tu mensaje lo antes posible.


Tu nombre (*)

Tu e-mail (*)

¿De qué quieres hablar?

¿Eres humano?
captcha

¿En qué podemos ayudarte?