Crear sprites online y fácil con CSS Sprites
La técnica de sprites es muy conocida por webmaster y diseñadores, y que es el sprites? Es una técnica que se utiliza en sitios web de mucho trafico para no sobrecargar los servidores, y consiste en utilizar solo una imagen de altas dimensiones en donde estarán contenidos todos los iconos, barras, y otras imágenes concernientes al diseño, luego de esto se «cortaran» mediante CSS, en realidad la imagen original no se corta sino más bien se reparte cada parte que va a ser utilizada mediante el CSS.
Sprites es en palabras más sencilla, es utilizar una imagen con muchas dentro y que luego cada imagen es utilizada en el lugar que corresponde mediante CSS, es un poco difícil de explicar, pero la verdad es que lo pueden entender mejor con un ejemplo:
Esta es una imagen que Google utilizaba antes, para su buscador, como se puede apreciar con tan solo una imagen mostraban todo lo que se visualizaba en el buscador, desde la «O» de la compaginaron hasta el mismo logo, todo ello desde una misma imagen y por supuesto repartidas mediante CSS.Pues Bien, ahora conozco una herramienta que te permite hacer exactamente eso, un Sprites, sin muchas complicaciones puedes crearlo y ademas te ofrece el codigo CSS, su nombre es CSS Sprites
CSS Sprites, te permite crear un sprite, solo tenemos que subir las imágenes y luego «mapearlas» o repartidas mediante una herramientas que ofrece la misma herramienta, yo en un pequeño ejemplo utilice «Custom Sprites» para hacer el ejemplo pero hay otras opciones:
Con el Custom Sprites podemos seleccionar la parte de la imagen que queremos configurar, y al lado derecho nos muestra su exacta ubicación luego de tenerla seleccionada lo que sigue es presionar «Snap!» y automáticamente debajo nos aparecerá el código CSS (como lo pueden ver seleccionado en el ejemplo), y listo solo hay que copiar ese CSS a nuestra hoja de estilos y por supuesto subir la imagen.
Pueden probar la herramienta para comprobar como funciona, algo a tener en cuenta es que no es necesario ningún tipo de registro y no hay mucha publicidad, por lo cual es una excelente opción para poder crear sprites sin necesidad siquiera de saber CSS aunque obviamente si queremos hacer un sprites es por que sabemos por lo menos lo básico de CSS, pero herramientas como esta siempre es bueno tenerlas a mano sobretodo si eres diseñador o hasta webmaster te resultara muy fácil utilizarla.
Enlace: CSS-Sprites
