El 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
Artículos relacionados
- Más consejos para crear una sección de Preguntas Frecuentes en tu sitio web
- Plugin de WordPress para decorar imágenes
- Consejos para crear una sección de Preguntas Frecuentes en tu sitio web
- e24Squares: transición en Ajax para la imágenes de tu galerÃa
- CSS3: Colocar un borde de tres lados a un elemento
Martes, 25 de Agosto de 2009 a las 07.39
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.