Sprites CSS

Creado por   el 2014-05-19 22:38:38



Qué son los sprites CSS ?
En palabras simples se refiere a una técnica que combina tecnologías HTML-CSS y que nos permite optimizar el tiempo de carga de nuestro sitio web mejorando la fluidez de nuestra pagina.
Cuando tenemos conciencia de que cada imagen requiere de una conexión independiente de tipo cliente-servidor y que cada conexión demora un tiempo en establecerse, entonces entendemos que debemos minimizar el numero de conexiones dentro de lo posible.

Con estas imágenes se requieren 3 conexiones independientes una de la otra.
imagen 1

imagen 2

imagen 3



En cambio con esta imagen solo necesitamos de una conexión.


Como implementarlos ?
Usando código CSS mostramos la sección correspondiente a la imagen deseada.

Entonces Creamos una etiqueta Div en este caso de un tamaño de 22x22 px.

code: css
background:url(result.png);
width:22px;
height:22px;

Ahora jugamos con la posición para aislar las imágenes.

code: css
background-position: 0px 0px;


code: css
background-position: -22px 0px;


code: css
background-position: -44px 0px;


Esta técnica resulta muy útil para trabajar con imágenes pequeñas que se repiten continuamente en nuestro sitio.
Servidor Web más utilizado, con mayor número de instalaciones a nivel mundial, es un proyecto de código abierto y uso gratuito, multiplataforma.
Conjunto de datos de un mismo contexto y almacenados sistemáticamente para su posterior uso.
Lenguajes que hacen referencia al codigo de marcado para la elaboración de páginas web.
Potente lenguaje de programación orientado a objetos, independiente del sistema operativo.
Lenguaje interpretado orientado a objetos desarrollado por Netscape que se utiliza en millones de páginas web y aplicaciones de servidor en todo el mundo
Sistema operativo de software libre inspirado en el sistema Unix, escrito por Linus Torvalds con la ayuda de miles de programadores en Internet
El modelado 3D es el proceso de desarrollo de una representación matemática de cualquier objeto tridimensional a través de un software especializado. Al producto se le llama modelo 3D
Lenguaje de programación principalmente orientado al desarrollo web, su código es ejecutado del lado del servidor.
Todo lo que no sea trabajo, solo temas recreativos para divertirse.