Generadores de CSS Sprites | Oloblogger Siguiendo con el tema de los CSS Sprites , hay diversas herramientas gratuitas para poder generar au...

28 de abril de 2010

Generadores de CSS Sprites

Siguiendo con el tema de los CSS Sprites, hay diversas herramientas gratuitas para poder generar automáticamente una sola imagen, sin necesidad de estar copiando, pegando y cuadrando uno a uno nuestros gráficos. Las que he encontrado no son tan eficientes como podría ser un ser humano a la hora de optimizar el espacio disponible, pero no cabe duda de que nos ahorrarán bastante tiempo si andamos con prisas o pocas ganas de currar.



CSS SPRITES GENERATOR. Subimos una a una las imágenes y el sprite queda disponible para descargar. Incluye las coordenadas para cada imagen y un ejemplo desde el que también se puede obtener el HTML necesario para mostrar individualmente las imágenes. Como opción, se puede cambiar el color del espacio libre.



CSS SPRITES. Más completo que el anterior, permite carga múltiple de imágenes y la posibilidad de generar un segundo juego de imágenes para efectos rollover, con seis opciones: desaturar, invertir, sepia, girar vertical, girar horizontal y relieve.



CSS SPRITE GENERATOR. Requiere subir las imágenes mediante un ZIP, pero tiene muchas opciones para generar el sprite como redimensión automática de las imágenes, definir espacio entre ellas, transparencia... También ofrece el CSS para obtener las imágenes individuales.



SMART SPRITES. Aplicación para descargar. No la he probado pero parece que es la más completa. Ya me direis...

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

8 comentarios :

  1. Wow.

    ¿Todavía nadie ha comentado esta entrada?
    Vea pues, y sabiendo que es un apunte fundamental para nuestros blogs, sobre todo para hacer frente a las nuevas políticas de Google del tiempo de carga.

    Ya logré implementar los sprites en mi blog, aunque curiosamente, no confie de aquellas herramientas y lo hize "cuadrito a cuadrito" con cada imagen Paint.

    El proceso manual es muy largo, pero con cosas positivas.
    Y me fue bien, de 33 peticiones de imágenes pasé solo a 2.
    La verdad que es bueno, así como realojar en la plantilla todos (o casi todos) los scripts que usemos.

    Un saludo cordial.

    ResponderEliminar
  2. Muy buena al opcion 2 "CSS SPRITES" te permite ubicar la imagenes a tu manera para generar el css (Te da los posiciones invertidas y hay que arrglarlas manualente sino sera un problema) yo con esa hice todo el sprite de mi blog no quedo ni una imagen suelta;)

    Saludos!!!!

    ResponderEliminar
  3. Je, je. Mola ver las imágenes todas juntitas ¿verdad?

    ResponderEliminar
  4. Hola, me encanta este blog.
    Una pregunta aparte del tema,
    ¿como haces para cambiar la fuente(letra) del blog?

    ResponderEliminar
  5. Hola Facundo
    Para cambiar la fuente hay que usar en la parte CSS la propiedad FONT-FAMILY.
    Para ver cómo funciona sólo tienes que buscarla acompañada de la palabra CSS. Hay montones de documentos en internet sobre el uso de las propiedades de las hojas de estilo.
    Ojo con usar fuentes "raras"
    Ver: Probando fuentes
    Saludos.

    ResponderEliminar
  6. Eres muy bueno explicando, pero yo soy muy malo entendiendo... la verdad que esto es vegonzozo pero... no se lo que es CSS

    ResponderEliminar
  7. Eso es básico Facundo y su desconocimiento no debe dar vergüenza, sino ganas de averiguar qué es. Te lo voy a poner fácil:

    http://oloblogger.blogspot.com/2010/05/blogger-estructura-basica-de-la.html

    http://oloblogger.blogspot.com/2010/05/blogger-estructura-basica-de-la_24.html

    ResponderEliminar