Herramientas para hacer sprites CSS? [cerrado]
https://stackoverflow.com/questions/527336
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Hay buenas herramientas para hacer sprites CSS?
Lo ideal sería que desee darle un directorio de imágenes y un archivo .css existente que se refiere a esas imágenes y tienen que crear una gran imagen optimizada con todas las pequeñas imágenes y cambiar mi archivo css para referirse a esas imágenes .
Al menos me gustaría que tome un directorio de imágenes y generar una gran Sprite y el css necesario el uso de cada uno como un fondo.
¿Hay buenas plugins Photoshop o aplicaciones totalmente soplado de hacer esto?
Solución
Esto va a hacer el 90% del trabajo para usted: CSS Sprite Generador . No obstante, deberá editar las reglas a sí mismo, pero la herramienta le dará los fragmentos de código que necesita para el nuevo archivo CSS.
Otros consejos
Sprite instantánea es un generador de CSS sprites en el navegador el que estoy trabajando. Es muy rápido, pero no tiene bastante tantas características como algunos de los otros. En la actualidad sólo funciona en Firefox o Chrome, ya que utiliza JavaScript y Canvas FileReader HTML para generar los sprites dentro del navegador web sin cargas.
Ahora hay Sprite Me de Steve Souders. Justo lo prueba y parece que funciona bastante bien.
Aquí está el enlace http://spriteme.org/ y aquí está el blog anunciando la misma.
Esto parece prometedor:
También encontré este artículo que tiene alguna información útil, e incluso algunos comentarios de los lectores vale la pena leer.
Además, aparentemente google Web Toolkit tiene algo -. Por lo que si usted está usando que podría ser vale la pena mirar
Prueba esto:
ZeroSprites es un generador de sprites CSS dirigida a la minimización área usando algoritmos VLSI floorplaning.
encontramos este bastante rápido aunque ese límite 500K carga podría ser un dolor . código fuente está disponible aquí
Tonttu es Adobe AIR aplicación basada en que proporciona un fácil interfaz para crear poderosas imágenes CSS Sprites. Puede especificar FiledWidth y FieldHeight o ordenar las imágenes.
Crear CSS Sprites Imágenes con la herramienta de escritorio Tonttu
No está claro todavía si se va a hacer en el marco ASP.NET núcleo pero aquí hay un proyecto de CodePlex de Microsoft para csssprites:
http://aspnet.codeplex.com/releases/view/50869
si te gusta - lo utilizan - o simplemente les gusta la idea a continuación, agregar un comentario. Creo que esto sería una gran cosa para tener en el marco ASP.NET. No ha utilizado personalmente (tuve que inventar la rueda a mí mismo), pero su conseguido buenas críticas.
Incluye los siguientes componentes:
- API para la generación automática de sprites y las imágenes en línea
- Controles y ayudantes que proporcionan una manera conveniente de llamar a la API
Las funciones adicionales en el segundo lugar de lanzamiento:
- Un control de CSS para la vinculación de los formularios Web (selecciona el archivo CSS correcto para el navegador del usuario, pero no muestra una imagen)
- Uso de las rutas de carpetas personalizadas que no sean App_Sprites
- Cambio de la dirección de mosaico de imágenes de sprite
- La fusión de la CSS generado con CSS propia de un usuario
Características bajo consideración para futuras versiones:
- Selección automática del color de fondo de sprites más eficiente
- minifying automáticamente el CSS rendido
- Compilar contra .NET 3.5
Sólo tiene que usar http://sprites.scherpontwikkeling.nl/ puede generar sprites de la página web URL, así ... se puede integrar los sprites después de desarrollar su sitio web. Es muy fácil de usar;)
No es una respuesta directa, pero a mis colegas desarrolladores e integradores web, considere simplemente alineando cada sprite a potencias de dos; por ejemplo, una cuadrícula de 16 píxeles o 32 pixel. Esto hace que el cálculo de las compensaciones en el archivo CSS mucho más fácil. Todo el espacio en blanco entre no importa como los formatos gifd y png comprimen muy bien.
Brújula Marco de CSS tiene generación de sprites automática .
Si como Java, entonces se puede utilizar GWT 1.5 + que viene con algo llamado " ImageBundle ." El compilador de GWT se encargará de todos los detalles desagradables para usted. Ni siquiera tendrá que codificar una sola línea de código JavaScript o escribir cualquier CSS.
Aquí es un script que combina imágenes a través de una secuencia de comandos de Photoshop en sprites CSS . No va a hacer un mapa de sprites como lo pidió, pero va a combinar imágenes en múltiplos de dos (2, 4, 8) si son del mismo tamaño. Yo prefiero la combinación de imágenes similares (normal, vuelo estacionario, seleccionado, los padres del seleccionado) que teniendo todas las imágenes en un archivo.
si está utilizando el rubí en los carriles, hay un fácil instalar la biblioteca para generar sprites CSS.
Hay una nueva herramienta llamada por ahí ActiveSprites, parte de la gema active_assets.
Github: http://bitly.com/eRTwU4
Se utiliza un rubí DSL para definir sus sprites y luego hacer "sprites" rastrillo y los sprites y hojas de estilo correspondientes conseguir generada.
Se rad!
A continuación, algunos ejemplos de código,
# config/sprites.rb
Rails.application.sprites do
sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
_'sprite_images/sprite1/1.png' => 'a.one'
_'sprite_images/sprite1/2.png' => 'span.two'
end
end
https://github.com/northpoint/SpeedySprite
Esta herramienta toma un enfoque novedoso en el que reúne sus imágenes solicitadas sobre la marcha como un servicio HTTP. Esto hace que todo el proceso bastante simple (sin procesamiento previo necesario, cambiar las imágenes en cualquier momento): Se inicia el servicio y luego referencia a cualquier imagen que desee en el código HTML:
<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />
Debido a que es dinámico, puede incluso hacer sprites de un conjunto dinámico de imágenes tales como una página de imágenes en miniatura. No es compatible con JPEG sin embargo, pero PNG y GIF funciona bien.
Le sugiero que use Sprite Web Master . I genera automáticamente hojas de sprites y el código CSS exportaciones para usted. Siempre trata de generar hojas de sprites más pequeños con algoritmos avanzados.
Esta es una captura de pantalla y youtube video
Ninguna de estas herramientas se reunió mis necesidades, por lo que escribió uno que utiliza la biblioteca pequeña imagen de Mark tylers, mtpixel (ahora parte de mtcelledit ) No es muy extensa, pero es fácilmente extensible a través de mtpixel construido en funciones que incluyen: escala de grises, la inversión de color, rotación, nitidez, cuantización, posterizar, flip (vertical y horizontal), transformar, RGB-> indexados, indexed-> rgb , borde de detectar, relieve, dibujo polígonos, texto y más.
Todo lo que hacemos es pasar un conjunto de imágenes como args (soporta PNG, GIF y JPEG) y se emite un png rgb llamada sprite.png junto con los datos de la imagen de rebanado útiles a la salida estándar. Yo lo uso en scripts bash a spritify un directorio completo de imágenes y salida de los Fragmentación de datos para la generación automática de css (con la esperanza de finalmente lo que es capaz de reemplazar las etiquetas img existentes automágicamente con un poco de creatividad sed / awk)
Los paquetes binarios para Linux cachorro estarán aquí:
http://murga-linux.com/puppy/viewtopic.php? t = 82009
Mi caso de uso sólo se requiere que empalma las imágenes verticalmente en una nueva png, así que eso es todo lo que hace, pero mi código fuente es de dominio público y la biblioteca mtcelledit es GPL3. Con mtpixel enlazado estáticamente, el binario es <100kb (sólo unos pocos kb cuando está ligado de forma dinámica) y las únicas otras dependencias se LibPNG, libjpeg y libgif (y freetype con el mtpixel oficial, pero yo no necesitaba el apoyo de texto, por lo que comentado los bits freetype en la acumulación estática)
no dude en modificar para sus propias necesidades:
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <mtpixel.h>
int main( int argc, char *argv[] ){
int i=0,height=0,width=0,y=0;
mtpixel_init();
mtImage *imglist[argc];
argc--;
do{ imglist[i] = mtpixel_image_load( argv[i+1] );
height+=imglist[i]->height;
if (imglist[i]->width > width) width=imglist[i]->width;
} while (++i < argc);
imglist[argc]=mtpixel_image_new_rgb(width,height);
imglist[argc]->palette.trans=0;
i=0;
do{ if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED)
mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y);
else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y);
printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y);
y+=imglist[i]->height;
mtpixel_image_destroy( imglist[i] );
}while (++i < argc);
mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 );
mtpixel_quit();
return 0;
}
Si está utilizando .NET, echa un vistazo a http://www.RequestReduce.com . No sólo crea el archivo de sprites de forma automática, pero lo hace sobre la marcha a través de un HttpModule junto con la fusión y minifying todos los CSS. Optimiza lso la imagen de sprite utilizando cuantificación y sin pérdida de compresión y que se encarga de la ración de los archivos generados utilizando ETags y expira cabeceras para garantizar óptima de almacenamiento en caché del navegador. La instalación es trivial que implica sólo un simple cambio de web.config. Véase mi entrada de blog sobre su adopción por el Microsoft Visual Studio y MSDN galería de ejemplos.
Hace poco me encontré estas herramientas: SpriteRight http://spriterightapp.com/
SpriteRight es un generador spritesheet CSS para el Mac que le permite importar las imágenes o las hojas de estilo existentes. Haga que sus sitios se cargan más rápido, reducir los costos de ancho de banda y ahorrar tiempo. SpriteRight incluso genera código CSS sobre la marcha.
