Trabar Amistad con CSS Sprites: Técnicas, Generadores
Estamos seguros que ya sabe qúe significa la palabra 'sprites'. La palabra es bastante engañosa porque sprite, en este caso, no es una imagen pequeña, es una imagen grande. Usted probablemente ha visto este CSS -trick cuando un botón se transforma al pasar el ratón, por lo general, la imagen del botón es desplazada o reflejada.
CSS Sprites extienden esta técnica. La diferencia es que en lugar de dos o tres imágenes, combinadas en una imagen, Usted puede utilizar cualquier número de imágenes. El término 'sprites' apareció en la industria de juegos. La idea era bastante simple: un ordenador puede crear una imagen en su memoria y, a continuación, mostrar sólo una parte de ella, que es más rápido que la creación de una nueva imagen cada vez. CSS sprites utilizan la misma idea: obtener una imagen para mostrar en cada caso sólo su parte.
¿Para qué se combina estas imágenes? ¿Se cargan más rápidamente?
No... Antes, teníamos que cortar imágenes para crear sectores y para cargar la página más rápidamente. Esta técnica creaba la ilusión de la carga más rápida de la página debido al número de sectores que se cargaban casi simultáneamente. Cada sector creaba un http-request separado.
Entonces, ¿cómo se puede crear esos sprites?
Para facilitar su trabajo, los desarrolladores han creado varias herramientas en línea y fuera de línea para la creación de CSS sprites. Todos ellas son muy fáciles de usar y hacen su trabajo muy bien. Así que vamos a echar un vistazo a una lista de generadores de CSS sprites que recomendamos.
SpritePad es una interfaz 'arrastrar y soltar' para crear sprites.
* * *
Compass es un framework excelente que puede crear sprites de una carpeta específica de imágenes. También utiliza Sass.
* * *
Lemonade es una herramienta que se puede utilizar para crear ficheros con sprites con la ayuda de la adición de líneas de código a los ficheros Sass.
* * *
SpriteMe es un bookmarklet que puede generar y mostrar los sprites utilizados en otro sitio.
* * *
La nueva versión del software Fireworks incluye una función para generar sprites.
* * *
Sprite Cow es un servicio útil para el "corte" manual de ficheros de sprites.
* * *
Glue es una línea de comandos para generar sprites.
* * *
CSS sprites es otro generador de sprites css.
* * *
Sprite Right es una aplicación de generación de sprites para Mac.
* * *
Spritebox es una interfaz 'arrastrar y soltar' para generar sprites.
* * *
Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!