css - online - que es sprites en programacion
Herramientas para hacer sprites de CSS (21)
Aún no está claro si se convertirá en el núcleo de la estructura ASP.NET, pero aquí hay un proyecto codeplex de Microsoft para csssprites:
http://aspnet.codeplex.com/releases/view/50869
si te gusta, úsalo, o simplemente como la idea, luego agrega un comentario. Creo que esto sería una gran cosa en el marco de ASP.NET. No lo he usado personalmente (tuve que inventar la rueda yo mismo) pero tiene buenas críticas.
Incluye los siguientes componentes:
- API para generar automáticamente sprites e imágenes en línea
- Controles y ayudantes que proporcionan una forma conveniente de llamar a la API
Funciones agregadas en la segunda versión:
- Un control de enlace de CSS para formularios web (selecciona el archivo CSS correcto para el navegador del usuario, pero no muestra una imagen)
- Usar rutas de carpetas personalizadas que no sean App_Sprites
- Cambiar la dirección de mosaico de las imágenes de sprites
- Fusionando el CSS generado con un CSS propio del usuario
Características que se consideran para lanzamientos futuros:
- Seleccionando automáticamente el color de fondo del sprite más eficiente
- Minería automática del CSS procesado
- Compilando contra .NET 3.5
¿Hay alguna buena herramienta para hacer sprites css?
IDEALMENTE me gustaría darle un directorio de imágenes y un archivo .css existente que se refiere a esas imágenes y hacer que cree una imagen grande optimizada con todas las pequeñas imágenes Y cambie mi archivo .css para referirse a esas imágenes.
Por lo menos, me gustaría que tomara un directorio de imágenes y generara un gran sprite y el .css necesarios para usar cada uno como fondo.
¿Hay algún buen plugin de photoshop o aplicaciones completas para hacer esto?
Ahora hay Sprite Me de Steve Souders. Solo lo prueba y parece funcionar bastante bien.
Aquí está el enlace http://spriteme.org/ y aquí está la publicación del blog que lo anuncia.
Aquí hay un script que combina imágenes a través de una secuencia de comandos de Photoshop en sprites de CSS . No hará un mapa de sprites como lo pidió, pero combinará imágenes en múltiplos de dos (2, 4, 8) si son del mismo tamaño. Prefiero combinar imágenes similares (normal, desplazado, seleccionado, principal de seleccionado) que tener todas las imágenes en un archivo.
Compass CSS Framework tiene generación automática de sprites .
Esto hará el 90% del trabajo para usted: http://spritegen.website-performance.org/ . Aún necesitará editar las reglas usted mismo, pero la herramienta le dará los fragmentos de código que necesita para el nuevo archivo CSS.
Esto parece prometedor:
También encontré este artículo que contiene información útil, e incluso algunos comentarios de lectores que vale la pena leer.
Además, al parecer, el conjunto de herramientas web de google tiene algo, por lo que, si lo usa, podría valer la pena visitarlo.
Hay una nueva herramienta llamada ActiveSprites, parte de la gema active_assets.
Github: http://bitly.com/eRTwU4
Usas un ruby dsl para definir tus sprites y luego haces "sprites" y se generan los sprites y las hojas de estilo correspondientes.
¡Es genial!
Aquí hay un código de muestra,
# 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
Ninguna de estas herramientas cumplía con mis requisitos, así que escribí una que usa la pequeña biblioteca de imágenes de Mark Tylers, mtpixel (ahora parte de mtcelledit ). No es muy extensa pero es fácilmente extensible a través de las funciones integradas de mtpixel que incluyen: escala de grises, inversión de color , rotación, nitidez, cuantización, posterización, volteo (vertical y horizontal), transformación, rgb-> indexado, indexado-> rgb, detección de bordes, relieve, dibujo de polígonos, texto y más.
Todo lo que haces es pasarle un conjunto de imágenes como args (admite png, gif y jpeg) y generará un rgb png llamado sprite.png junto con los útiles datos de corte de imágenes para stdout. Lo uso en scripts bash para spritify un directorio completo de imágenes y salida de los datos de corte para la generación automática de css (con la esperanza de eventualmente hacerlo capaz de reemplazar las etiquetas de img existentes automágicamente con un poco de sed / awk creativo)
Los paquetes binarios para Linux para cachorros estarán aquí:
http://murga-linux.com/puppy/viewtopic.php?t=82009
Mi caso de uso solo requería empalmar las imágenes verticalmente en un nuevo 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 (solo unos pocos kb cuando se vincula dinámicamente) y las únicas otras dependencias son libpng, libjpeg y libgif (y freetype con el mtpixel oficial, pero no necesitaba el soporte de texto, entonces comentado los bits de freetype en la construcción estática)
siéntete libre de modificar para tus 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;
}
No es una respuesta directa, pero para mis compañeros desarrolladores e integradores web, considere simplemente alinear cada sprite con potencias de dos; por ejemplo, una cuadrícula de 16 píxeles o 32 píxeles. Hace el cálculo de compensaciones en el archivo CSS mucho más fácil. No importa todo el espacio en blanco, ya que los formatos gifd y png lo comprimen muy bien.
Prueba esto:
Recientemente encontré estas herramientas: SpriteRight http://spriterightapp.com/
SpriteRight es un generador de hojas de estilo de CSS para Mac que le permite importar sus imágenes o hojas de estilo existentes. Haga que sus sitios carguen más rápido, reduzca los costos de ancho de banda y ahorre tiempo. SpriteRight incluso genera código CSS sobre la marcha.
Si está utilizando .net, consulte http://www.RequestReduce.com . No solo crea el archivo sprite automáticamente, sino que lo hace sobre la marcha a través de un HttpModule junto con la fusión y minificación de todo el CSS. También optimiza la imagen de sprite mediante la cuantización y la compresión sin pérdida, y maneja el servicio de los archivos generados utilizando los encabezados ETags y Expires para garantizar un almacenamiento en caché óptimo del navegador. La configuración es trivial y solo implica un simple cambio de web.config. Consulte la publicación de mi blog sobre su adopción por parte de Microsoft Visual Studio y la galería MSDN Samples.
Simplemente use http://sprites.scherpontwikkeling.nl/ , puede generar sprites desde la URL del sitio web también ... puede integrar sus sprites luego de desarrollar su sitio web. Es muy fácil de usar ;)
Te sugiero que uses Sprite Master Web . Genero hojas de sprites automáticamente y exporto código CSS para usted. Siempre trata de generar hojas de sprites más pequeñas con algoritmos avanzados.
Aquí hay una captura de pantalla y un video de youtube
si está usando ruby on rails, hay una biblioteca fácil de instalar para generar sprites css.
Tonttu es una aplicación basada en Adobe AIR que proporciona una interfaz sencilla para crear potentes imágenes CSS Sprites. Puede especificar FiledWidth y FieldHeight u ordenar imágenes.
Crea imágenes CSS Sprites con la herramienta de escritorio Tonttu
Instant Sprite es un generador de sprites CSS en el navegador en el que estoy trabajando. Es realmente rápido, pero no tiene tantas características como algunas de las otras. Actualmente solo funciona en Firefox o Chrome, ya que utiliza JavaScript FileReader y HTML Canvas para generar los sprites dentro del navegador web sin cargas.
encontró esto bastante rápido, aunque el límite de carga de 500K podría ser un problema. el código fuente está disponible here
ZeroSprites es un generador de sprites de CSS dirigido a la minimización de área usando algoritmos de planificación de piso VLSI.
https://github.com/northpoint/SpeedySprite
Esta herramienta tiene un enfoque novedoso ya que ensambla sus imágenes solicitadas sobre la marcha como un servicio http. Esto hace que todo el proceso sea bastante simple (no requiere preprocesamiento, cambie las imágenes en cualquier momento): inicia el servicio y luego referencia las imágenes que desee en su HTML:
<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />
Debido a que es dinámico, puede incluso crear sprites a partir de un conjunto dinámico de imágenes, como una página de miniaturas. No es compatible con JPEG, pero PNG y GIF funcionan bien.
Si le gusta Java, puede usar GWT 1.5+ que viene con algo llamado " ImageBundle ". El compilador GWT se encargará de todos los detalles desagradables para usted. Ni siquiera tendrá que codificar una sola línea de JavaScript o escribir ningún CSS.