Jj’s blog

Con CSS

Ahora que estaba aburrido por fín me di tiempo de hacer una tontera que hace tanto tiempo queria intentar con DropShadows, Viendo la página de DevianArt me gustó mucho el estilo que usaban para darle el efecto de sombra a las vistas previas, al querer hacer lo mismo me di cuenta que ellos usan imagenes de tamaños predefinidos para las vistas previas de tamaños predefinidos.

Pero si no se el tamaño de la imagen? también puedo ponerle sombra usando CSS!. Las reglas son muy simples

Y para usar el estilo sólo hay que rodear la imagen en un <div> con class="sombra"

Otra manera de hacerlo, sin necesidad de tener que rodear la imagen dentro de un <div>, es simplemente agregandole a la imagen los siguientes estilos

El detalle de hacer esto es que la sombra es verá a lo largo y ancho de la imagen, en lugar de estar desplazada. Sin embargo es muy practico y se le puede manipular sin mayor problema

Sin CSS

Pero que hacer si la imagen a la que quiero ponerle sombra no es cuadrada?

Lamentablemente CSS aun no es tan poderoso como para hacer esas cosas, y no creo que lo llegue a ser por el momento. Sin embargo existen muchas herramientas como Gimp, PhotoShop, Paint Shop Pro, etcétera. E inclúso hay miles de tutoriales de como hacerlo

Pero siempre es una joda tener que abrir el programa y en el mejor de los casos correr el filtro que se encarga de eso.

Pero gracias a ImageMagick se puede lograr el mismo efecto de un solo comando

En este script para agregar drop shadow uso los comandos convert y composite de ImageMagick para lograr el efecto, pero al encadenar los comandos se resumen en una sola línea. El resto de líneas son para que el script quede bonito y entendible

Corriendo el script se puede crear chicharros, o hacer que otras imágenes se vean mas bonitas

Click para ver el código

#!/bin/bash

#
#   Crea una imagen con efecto "drop shadow" a partir de una de entrada \o/
#
#   email:      rot13(wwqryp@tznvy.pbz)
#   Blog:       http://jj.isgeek.net
#
#   http://www.isgeek.net       Jj  2005
#

function ayuda {
cat << EOF
$0: Faltan argumentos
USO:
    $0 entrada.img [salida.img]

Toma la imagen de entrada y crea una imagen de salida con sombra
En caso no se use una imagen de salida, esta tendra el nombre ${PREFIJO}entrada.img
EOF
}

PREFIJO="sombra_"
if [ -z $1 ]; then
    ayuda
    exit
fi
IN=$1
if [ -z $2 ]; then
    OUT=${PREFIJO}${1}
else
    OUT=$2
fi

COMPOSITE="/usr/bin/composite"
CONVERT="/usr/bin/convert"
BLUR="0x5"
BORDE="20x20"
BGTR="white"
SHAVE="15x15"
GRAY="gray"
GRAV="northwest"
$CONVERT \
 -colorspace $GRAY \
 $IN \
 -channel RGBA \
 -bordercolor $BGTR \
 -border $BORDE \
 -transparent $BGTR \
 -blur $BLUR \
 -shave $SHAVE \
 - | \
$COMPOSITE \
 -gravity $GRAV \
 $IN - $OUT