SummArg | Cursos y recursos para webmasters

09/01/2011

Crear clases CSS a partir de una única imagen Sprite

Existen varias aplicaciones online que a partir de varios archivos de imagen nos generan una única imagen sprite con su respectivo código CSS. En este caso para los que ya tengan armada la imagen sprite, conteniendo dentro todas las imagenes que necesitan, les presentamos spritebox.net, una aplicación online que nos permite crear máscaras sobre nuestras imágenes y nos devuelve el CSS con los valores apropiados para el background-position.

Modo de uso

  • Subimos una imagen o indicamos la URL de la imagen sprite.
  • Creamos la máscara sobre un ícono o porción de imagen, la cual se previsualizará en una de las ventanas.
  • Si necesitamos mas precisión, podemos cambiar al modo Zoom presionando la tecla Z. Se debe combinar con las teclas del teclado para hacer Zoom in y Zoom out.
  • Colocamos un nombre a la clase (podemos cambiar entre ID y CLASS).
  • Repetimos la operación.
  • Cuando todas nuestras imagenes quedaron marcadas, presionamos Create CSS.

Excelente aplicación para tener en los marcadores. Spritebox!

Dejar un comentario