Regalos semanales: 12 generadores de sprites CSS gratuitos
Los sprites de imágenes CSS le permiten reducir drásticamente la cantidad de solicitudes HTTP en un sitio al combinar muchas o todas las imágenes de su sitio en un solo archivo. Este archivo se puede usar junto con el posicionamiento de fondo CSS para implementar imágenes individuales.
La desventaja de esta técnica es que es un proceso minucioso e involucrado que requiere que combine manualmente sus imágenes y toque el CSS para que cada imagen se muestre correctamente. Afortunadamente, hay una serie de herramientas gratuitas en línea que automatizan completamente este proceso. Hoy tenemos una increíble colección de doce de estas herramientas, cada una con su propia versión única del proceso de generación de sprites. Ya sea que esté buscando crear un sprite desde una carpeta de imágenes o convertir un sitio existente, tenemos las herramientas para ayudarlo a hacer el trabajo en segundos.
CSS Sprite Generator: Proyecto Fondue
Un buen generador con muchas opciones. Cargas un .ZIP de todas las imágenes que te gustaría convertir en un sprite y se encarga del resto. Escupe una imagen y todos los diversos valores de "posición de fondo" que necesita.
Generador de CSS Sprites
Feo y con errores, este generador de sprites te obliga a subir cada imagen individualmente. Pruébalo para ver lo que piensas, pero sinceramente, hay mejores alternativas en esta lista.
CSS Sprites - Generador / Generador de Sprites CSS en línea
Este es muy lindo. Puede cargar fácilmente un montón de imágenes a la vez, elegir su tipo de archivo de salida e incluso elegir obtener el código Sass y CSS como resultado. También hay algunas opciones interesantes para generar automáticamente efectos de desplazamiento como desaturado y volteado. En general es bastante impresionante, asegúrese de comprobarlo.
Spritebox: crea CSS a partir de imágenes de Sprite
Éste toma una ruta diferente, un poco menos automatizada. En lugar de crear una imagen de sprite para usted, le permite cargar su sprite ya creado y definir áreas específicas para generar el CSS resultante. Una gran herramienta si prefiere construir sprites en Photoshop y solo quiere ayuda con el código.
Lienzo: CSS Sprites Generator
Si está cargando imágenes para esta, debe hacerlo de una en una, lo cual es un poco molesto. Si tiene enlaces, simplemente puede pegar en una lista con los nombres de clase correspondientes y listo. Las opciones incluyen relleno y colores de fondo. Funcionó bien en mis pruebas, definitivamente vale la pena echarle un vistazo.
Puntadas: un generador de hojas de sprites HTML5
Este le permite arrastrar imágenes, lo cual es increíble después de usar todos los descargadores incómodos que otros desarrolladores han creado. Después de eso, simplemente puede hacer clic en un botón para obtener la imagen y en otro para obtener el CSS. Prácticamente no hay opciones y solo funciona en Chrome y Firefox, pero es perfecto si solo quieres una solución rápida y simple.
Spritemapper
Este es solo para super nerds, es un generador de sprites descargable que se ejecuta desde la línea de comandos. Sin embargo, la implementación es muy ingeniosa, simplemente apunte a su archivo CSS existente y hace el resto del trabajo. Esto hace que el problema de la administración de sprites a largo plazo sea muy fácil, ya que puede conservar sus archivos css e imágenes originales y volver a procesarlos cuando haya un cambio.
SpriteMe
SpriteMe es una herramienta increíble que te permite mantener completamente intacto tu proceso de desarrollo típico. Simplemente construya su página como lo haría normalmente con imágenes individuales. Luego, una vez que haya terminado, abra la página en un navegador y presione el marcador SpriteMe. Esto toma todas las imágenes de la página, crea un sprite y genera el CSS. Esto es especialmente útil si está convirtiendo un sitio existente.
Spritefy
Spritefy es otra opción que te permite simplemente arrastrar un montón de archivos al navegador para procesarlos. Al igual que con Stitches, realmente no hay ninguna opción, pero definitivamente es una forma súper rápida de comenzar a usar sprites (solo Chrome y Firefox).
CSS Sprite Generator
Este tiene algunos pasos innecesarios en el proceso de generación y configuración, por lo que lleva unos segundos más que la mayoría de las otras alternativas, pero tiene una tonelada de salida de código que incluye CSS y HTML junto con varios fragmentos para agregar cada imagen a un div o span, insertando enlaces, etc.
SpriteMeister - Generador automático de sprites CSS
SpriteMeister es muy parecido a SpriteMe anterior, solo que menos automatizado. En lugar de usar un bookmarklet, carga manualmente cada imagen y su archivo CSS actual y luego recibe una descarga con código actualizado y una sola imagen.
Sprite Creator 2.0
Este funciona igual que Spritebox arriba. Cargue la imagen de sprite que creó en otro lugar y utilice un proceso de selección simple para generar automáticamente el CSS apropiado para cada imagen.
¿Quiéralo? ¡Compártelo!
Si disfrutaste la colección de regalos de esta semana, comparte el amor y envía un enlace a tus sitios favoritos. ¡Aquí hay un fragmento conveniente para que copie y pegue como desee!
12 generadores de sprites CSS gratuitos: http://goo.gl/NhLNR
