Efecto foto en tus imágenes | Oloblogger Este es un script que sirve para darle aspecto de fotografía a las imágenes que coloques en tu web. Estas aparecerán un poco inclinadas, con...

3 de febrero de 2008

Efecto foto en tus imágenes

Este es un script que sirve para darle aspecto de fotografía a las imágenes que coloques en tu web. Estas aparecerán un poco inclinadas, con un marco y un poco difuminadas en un extremo. Todo tipo Polaroid. Se graba el script en la plantilla y una vez allí, funcionamos como con cualquier otra clase.

<script src='http://www.netzgesta.de/instant/instant.js' type='text/javascript'/>

Editais la plantilla (HTML) y el código de arriba lo teneis que copiar encima de la etiqueta </head>. Con esto generamos la clase instant.

Luego, cada vez que creeis una entrada en la que querais poner una imagen con este efecto, teneis que subir la imagen y posteriormente añadir la clase instant con sus atributos dentro del tag <img src...>, más o menos así.

<img class="instant ishadow33 itiltright icolor000000" src="URLIMAGEN"/>


Los tres parámetros son optativos. Si no se ponen, se aplicarán los valores por defecto, que son válidos para los formatos más habituales con fondos claros. Si el fondo es totalmente blanco o totalmente negro, quizás convenga introducir alguna modificación. La configuración de los parámetros es de la siguiente manera:
  • ishadowXX: Donde XX es la intensidad de la sombra, desde el 0 (ninguna) hasta 99 (negra). Por defecto es 33.
  • itiltXXXXX: itiltright inclinará la imagen a la derecha, itiltfleft a la izquierda y itiltnone la dejará vertical.
  • icolorXXXXXX: Aquí se indicará el color del marco en código hexadecimal (ffffff=blanco 000000=negro).
Así, la imagen anterior con ishadow88 itiltleft icolorcccccc, quedaría de esta otra manera.


Creo que más de un@ sacará un buen partido de este truco. Para alojarlo vosotros mismos, el fichero .js está en este enlace en formato zip.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

3 comentarios :

  1. Pues no veo diferencia entre las dos fotos me parece una tontada

    ResponderEliminar
  2. Puedes volver a echar un vistazo con más paciencia... si quieres.

    ResponderEliminar