Imágenes con efecto polaroid usando JavaScript
viernes, 15 de junio de 2007

Instant.jsInstant.js es un script no obstrusivo que permite agregar un efecto tipo polaroid a las imágenes de forma muy sencilla [ Descargar ]

Su funcionamiento está limitado a Firefox, Opera y Safari. En cambio IE, al no soportar Canvas , mostrará la imagen original. La nueva versión 1.1 ofrece también soporte para IE 6 y 7.

 

Para usarlo incorporamos el script a nuestro sitio:

 

HTML
  1. <script type="text/javascript" src="instant.js"></script>

 

 

Y agregamos la clase "instant" a la imagen que queremos modificar:

 

HTML
  1. <img class="instant" src="imagen.jpg" width="200" height="200" alt="">

 

 

Parámetros:

 

  • .Sombra:  ishadowX, en donde X es un numero entre 0 y 100. Por default el valor es 33
  • .Orientación de la imagen: itiltleft (izquierda), itiltright (derecha) o itiltnone (ninguno)
  • .Color del marco: icolorX, en donde X es el color que queremos para el marco, puesto en hexadecimal.


Ejemplo:

 

Ejemplo

 

 

HTML
  1. <img class="instant ishadow65 itiltright icolorFFFFFF" src="imagen.jpg" width="200" height="200" alt="">

 

 





 Comentarios (6)
 1 Escrito por Oscar, el 09-08-2007 22:40
Muy bueno el efecto, muchas gracias por compartirlo!!!
 2 Escrito por Dany1, el 09-08-2007 22:41
Genial explicado este efecto! 
 
Gracias por compartirlo ^^
 3 Escrito por Manu, el 09-08-2007 22:42
La verdad es que es Opera el que no sirve, IE sí que va emulando VML.
 4 Escrito por Manu website, el 15-08-2007 07:37
La verdad que opera si que soporta canvas, por lo que el script si que vale.
 5 Escrito por martin website, el 16-09-2007 19:06
Gracias por el post, lo estaba necesitando!!!!
 6 Escrito por kurna, el 11-02-2008 13:56
Simplemente increible, impresionante y genial !!!


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code

 
Delicious
Mister Wong
< Anterior   Siguiente >

Suscribirse por feed


Suscribirse por e-mail

Tu dirección de correo