Instant.js, consigue el efecto polaroid en tus imagenes

instant-js.png

En ANIETO2K encuentro un interesante recurso, se trata de Instant.js , una librería JS que interactua con nuestras imagenes y nos permite hacer que el aspecto de las mismas sean similares a las polaroids. [Descargar][Demo]

Su funcionamiento está limitado a Firefox, Opera y Safari. En cambio IE, al no soportar Canvas , se mostrará la imagen original.

Para usarlo incorporamos el script a nuestro sitio:

Código HTML:

<script type=”text/javascript” src=”instant.js”></script>

 Y agregamos la clase “instant” a la imagen que queremos modificar:

Código HTML:

<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

Código:

<img class=”instant ishadow65 itiltright icolorFFFFFF” src=”imagen.jpg” width=”200″ height=”200″ alt=””>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: