Micaela 15 de septiembre de 2008 a las 17.00
   Imprimir artículo
elWebmaster.com

Bordes suaves para imágenes con Javascript


ejemploEl truco que les voy a mostrar crea bordes suaves para nuestras imágenes usando código Javascript y CSS de poco peso, dando un efecto que semeja nubes o bordes con transparencias graduales.

Este es un script no obstrusivo por lo que no es necesario cambiar el código HTML a excepción de agregar una clase identificatoria a las imágenes que queramos modificar. Al utilizarlo nos permite elegir cual de los 4 bordes se desea cambiar y cual no.

Internamente el script busca las imágenes a modificarse y pega copias de la misma una arriba de la otra disminuyendo de a poco su tamaño. De esta forma dejando la imagen mas externa transparente y aumentando su opacidad hasta dejar la mas interna totalmente opaca logra el efecto deseado.

Para usarlo descarga la librería desde aquí y enlázala desde tu sitio usando el siguiente código en la sección head:

<script type="text/javascript" src="softedge/softedge.js"></script>

En el archivo con extensión js hay un área de configuración donde podrás editar las opciones para lograr varios efectos.

Tan sólo siguiendo estos pasos, y aún sin modificar la configuración, ya tendrás la posibilidad de disfrutar imágenes con bordes suavizados en tu página.

Fuente: CSS Globe


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. elias dice:

    hola, me llamo eslia, tengo un problema con el scrip, resulta que las fotos que las tenga en una taba y no en un div se cambian de lugar pocicionandoce en la esquina superior izquierda de la pagina, pero con las imagenes que las tego en div, anda perfecto,; me prodrias decir como puedo arreglar mi problema, gracias. saludos desde argentina.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder