title: Drop Shadow f00
link: http://jj.isgeek.net/2005/09/imagemagick-fun/
author: Jj
description: 
post_id: 35
date: 2005/09/03 14:30:14
created_gmt: 2005/09/03 19:30:14
comment_status: open
slug: imagemagick-fun

#### Con CSS

![Chix subiendo escaleras en el estadio de Memphis](https://bm.isgeek.net/27/c0/94810ce543d3ab236ee8b8f9b7d241095fb6925d43b0b8b91b157f20dc77.jpg)

Ahora que estaba aburrido por fÃ­n me di tiempo de hacer una tontera que hace tanto tiempo queria intentar con [DropShadows](http://whatis.techtarget.com/definition/0,,sid9_gci816890,00.html), Viendo la pÃ¡gina de [DevianArt](http://www.deviantart.com/) 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](http://www.isgeek.net/files/dropshadow.html)!. Las reglas son muy simples :)

div.sombra {

    background: url([alfalfa.png](http://www.isgeek.net/files/alfalfa.png)) no-repeat bottom right;

    float: left;

}

div.sombra img {

    margin: -10px 10px 5px -10px;

}

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

<div class="sombra"> 

<img src="http://static.flickr.com/24/36713866_eb22f7ff9a.jpg" alt="Demo de DropShadow con CSS"/> 

</div> 

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

img.sombra {

    background: url(alfalfa.png) no-repeat bottom right;

    padding: 0 10px 10px 0;

}

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](http://www.gimp.org/), [PhotoShop](http://www.amazon.com/exec/obidos/tg/detail/-/B00081I76A/qid=1125773274/sr=8-1/ref=pd_bbs_unbuck_1/104-5996548-9891959?v=glance&s=software&n=541966), [Paint Shop Pro](http://www.amazon.com/exec/obidos/tg/detail/-/B0002W2UMW/qid=1125773363/sr=8-1/ref=pd_bbs_unbuck_1/104-5996548-9891959?v=glance&s=software&n=541966), 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](http://imagemagick.org) se puede lograr el mismo efecto de _[un solo comando](http://www.isgeek.net/files/dropsh)_

En [este script para agregar drop shadow](http://www.isgeek.net/files/dropsh) 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 :)

![Imagen sin Drop Shadow](/uploads/sample_b00b.png) ![Imagen con Drop Shadow](http://jj.isgeek.net/uploads/sombra_sample_b00b.png)

![Imagen sin Drop Shadow](/uploads/cate_chicharro.png) ![Imagen con Drop Shadow](http://jj.isgeek.net/uploads/sombra_cate_chicharro.png)

[Click para ver el cÃ³digo](javascript:toggle\('div_dropsh'\))
    
    
    #!/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

## Comments

**[Steve](#41 "2005-09-06 00:52:24"):** Ahora que estoy cambiando mi plantilla de blogger he estado viendo un montÃ³n de cosas de css y incompatibilidades entre exploradores es una mierda. He tenido que instalar IE y Opera para poder ir probando mis cambios muchas veces FF tambien se comporta extraÃ±o.

