Crear imagen disabled-like para ser usada con CSS (estado de botones)

En un proyecto que estoy trabajando utilizo iconos para los botones en las pantallas, el proyecto tiene un comportamiento como las aplicaciones de escritorio, en el sentido de que dependiendo del “modo” que se esté trabajando, se activan/desactivan algunos botones/campos. En el caso del texto de los botones, con simplemente agregarle al botón el atributo “disabled”, este cambia de apariencia, pero la imagen se mantiene del color. Así que trabajé en un script que se encargue de automatizar este proceso ya que pude haberlo hecho usando gimp, pero como son muchas imágenes las que quería convertir, usé imagemagick.

Para ilustrar un poco mas el asunto, la imagen original es: y necesito que el resutado sea:
Para que, dependiendo del estado, cambiar la regla background-position del elemento y cambie de color a gris, mostrando un efecto de disabled.




#!/bin/bash# css-img-disabledv0.1

# Script para crear una imagen destinada a ser usada como imagen de doble

# estado, practico al usar en sitios web junto con hoja de estilo en cascada (css)

# Autor: Javier E. Pérez P. | http://dvst.wordpress.com | 20070812

# Crear carpeta (si no existe) para imagenes grices

if [ ! -e grices ]; then

mkdir grices

fi

# Crear carpeta (si no existe) para imagenes resultantes

if [ ! -e resultados ] ; then

mkdir resultados

fi

# Crear imagen de fondo (transparente 16×36)

convert -size 16×36 xc:none fondo-transparente.png

for file in *.png; do

# tomamos solo el nombre de archivo (sin extensión)

NOMBRE_ARCHIVO=${file%%.png}

# convertir imagen original a gris y 10% mas de brillo para situarla en carpeta de grices

convert -type grayscale -modulate 110 $file grices/$NOMBRE_ARCHIVO-gris.png

# componer original con imagen de fondo para situarla en imagenes resultantes

composite -dissolve 100% $file fondo-transparente.png resultados/$NOMBRE_ARCHIVO-result.png

# componer imagen gris con imagen de fondo resultante para obtener el resultado final

composite -dissolve 100% -geometry +0+20 grices/$NOMBRE_ARCHIVO-gris.png resultados/$NOMBRE_ARCHIVO-result.png resultados/$NOMBRE_ARCHIVO-result.png

# avisamos por pantall

echo “Imagen: $file terminada “

done

# ya los grices no nos sirven sino que ocupan mas espacio en disco, así que los borramos

rm -fr grices

Luego la regla en css podría ser:

input[type="button"][value="Agregar"]{
background-image : url("/img/icons/add.png") ;
background-repeat : no-repeat ;
background-position : 6px 3px ;
padding-left : 25px ;
}

input[type="button"][value="Agregar"][disabled] {
background-image : url(“/img/icons/add.png”) ;
background-repeat : no-repeat ;
background-position : 6px -16px ;
padding-left : 25px ;
}

El icono que usé en el ejemplo lo saqué de famfamfam .

Sugerencia: Podría ser bueno que en vez de leer una lista de archivos en el directorio actual, recibiera una lista de archivos a aplicar la operación, algo como: css-img-disabled.sh add.png cancel.png y que el script sólo reconozca esos archivos.

PD : que cagada es el editor de wordpress cuando uno quiere meter código, formatea la salida

~ por dvst en Agosto 12, 2007.