Efecto Glossy con Javascript

Glossy es una pequeña librería Javascript que permite agregar esquinas redondeadas además de brillos y sombras con lo cual se consigue un efecto visual muy agradable con imágenes sencillas. Es compatible con la mayoría de los navegadores entre ellos Firefox 1.5+, Opera 9+, Safari e IE6+.

glossy.jpg

Para utilizar Glossy los primero es descargar los archivos fuente en glossy.zip, luego de descomprimir los archivos, incluimos la librería glossy.js a nuestro html de la forma:

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

Luego de ello, para aplicarlo a una determinada imagen, debemos aplicar la clase glossy, luego puedes configurar los efectos a aplicar con las siguientes opciones:

  • iradiusNN: define el valor del radio, donde NN es el porcentaje de la dimensión minima, el radio puede ser desde 20 hasta 50.
  • noshadow: indica que no se debe aplicar shadow.
  • ibgcolorHHHHHH: indica el color del fondo en hexadecimales, donde HHHHHH puede variar entre 000000 y ffffff.
  • igradientHHHHHH: color del gradiente que se desea aplicar.
  • horizontal: indica la direccion del gradiente, por defecto es vertical.

Luego si deseamos que el efecto sea con un radio que sea el 50% del lado de un cuadrado, seria de la forma:

<img src="box.gif" class="glossy iradius50" />

Pero si deseamos que tenga un fondo de color verde y que no tenga sombra se tendría:

<img src="box.gif" class="glossy ibgcolor00aa00 noshadow" />

Sencillo de utilizar pero con un buen resultado visual, de seguro les servirá para decorar sus imagenes. Gracias Giancarlo por el dato.

Comentarios Total 15 comentarios

JaGo!
Publicado: 20/08/2007 9:08 pm

Parece q no funciona con Konqueror…

Luis
Publicado: 21/08/2007 7:01 pm

Y que utilidad tiene esto? No sera mejor hacerlo en photoshop, subirlo y ahorrar al servidor a ejecutar todo ese codigo? a fin de cuentas la imagen pesa lo mismo plana que con el efectito «glossy»

Veo mas esto como proyecto experimental que como algo util para un webmaster

malder
Publicado: 21/08/2007 11:47 pm

Pues es interesante pero como Luis dice No es muy inteligente porque hacemos cque la cpu del server consuma más, y el rendimiento de la cpu es un problema que cada día afecta más a los webmasters sobre todo los que usan wordpress.

No obstante yo me he quedado alucinado con el resultado, muy bueno!

caos30
Publicado: 22/08/2007 5:51 pm

Pues por yo creo que estáis equivocados: no consume más capacidad del servidor puesto que lo que realiza la transformación de la imagen es el archivo de javascript glossy.js, que SE EJECUTA EN EL NAVEGADOR DEL CLIENTE.

Así que en todo caso, la única precaución a tener en cuenta es en no incluir muchas imagenes que usen glossy en una misma página, pues podría cargarse con cierta lentitud… aunque es un hablar por hablar pues no he hecho pruebas para saber a aprtir de cuantas imagenes se empezaría a notar.

Luis
Publicado: 22/08/2007 6:28 pm

Si, pero es que partimos de la base de que es mas sencillo aprender a hacer ese efecto en photoshop que con las opciones de fusión lo haces en 10 segundos, que vincular un javascript y hacer mas pesada la carga del lado que sea (cliente o servidor). Ese era el apunte.

Un saludo y felicidades por el blog

caos30
Publicado: 22/08/2007 8:54 pm

No Luis, creo que el script en cuestión tiene un gran interés. Te pondré otro ejemplo: tienes una web donde creas albums de fotos (tuyas, o de tus usuarios), y la cuestión es que con este script, las imágenes las guardas en la BBDD tal cuál como las sube el usuario, pero en cambio luego «automáticamente» (utilizando el script glossy) puedes mostrarlo con más «encanto» SIN MODIFICARLAS EN TU BASE DE DATOS! Así el día que te «canses» de glossy lo dejas de utilizar o lo cambios por otro script, pero las imágenes originales nunca las «pierdes».

Ah, mira, y diciendo esto se me ocurre otra razón para no hacerlo con un Gimp o Photoshop: te puede interesar que una misma imagen que tengas en tu servidor, a veces se muestre con un glossy diferente y otras veces incluso sin ningún efecto añadido, según muestres la miniatura de la imagen, por ejemplo con glossy, o bien la imagen en alta resolución sin glossy ;)

En fin, que es todo un inventazo!

Feli
Publicado: 18/10/2007 12:53 pm

Bueno he probado el efecto, y queda fenomenal, pero en IE hay un problema, y es que cuando redimensionas la página, restauras o maximizas, las imagenes no mantienen la posición original y se desordenan. Alguien con el mismo problema que lo haya solucionado?

Simon
Publicado: 17/01/2008 12:44 pm

Mira esto, estría ben para a tua web, quedan unhos botos moy vistosos!!

Guillermo
Publicado: 22/04/2008 5:34 pm

hice una prueba y la verdad mis respetos es un excelente truco cuando maximizas o minimisas hay problemas pero se ven bien

pepe
Publicado: 15/07/2008 2:04 pm

ustedes son idiotas?

es JAVASCRIPT!!!!

EL QUE LABURA ES TU MAQUINA NO EL SERVIDOR!!!!

Y NO!! NO ES MEJOR HACERLO CON FOTOSHOP! PORQUE LO TENDRIAS QUE HACER PARA TODAS LAS FOTITOS QUE QUIERAS! Y PORQUE TARDARIA BOCHA EN BAJAR LAS IMAGENES!

EN CAMBIO CON ESTE SCRIPT SOLO TIENES QUE AGREGARLE CLASS=»GLOSSY» AL TAG DE LA IMAGEN Y WALÁ!!!!

PIENSEN UN POCO ANTES DE COMENTAR IDIOTECES….POR ALGO HACEN ESTOS SCRIPT!

manuel
Publicado: 24/11/2008 4:26 pm

HE ESTADO INTENTADO UTILIZAR ESTE SCRIPT EN UNA PAGINA ASP.NET PERO NO ME SALE, EN HTML YA ME SALIO, NO SE SI ESTARE UTILIZANDO EL CODIGO CORRECTO, SI ALGUIEN PUDIESE PASARME EL CODIGO EN ASP.NET COMO UTILIZAR ESTE SCRIPT.

GRACIAS DE ANTEMANO

cuajinaiz
Publicado: 21/02/2009 4:49 pm

YO TAMBIEN ME CAGO EN ESE TAL LUIS SOLO QUIERE MENOSPRECIAR EL TRABAJO DE OTROS. POR CIERTO QUE ESTO MISMO ME LO ENCONTRE EN OTRO SITIO… DE QUIEN SERA EL ORIGINAL?

quique
Publicado: 10/04/2009 7:26 pm

Con Internet Explorer 7 no funciona,no muestra ni la imagen

Javier
Publicado: 16/12/2009 9:42 am

Buenas:
Queria hacer una pregunta media tonta. Pero buen. Recien me inicio en esto y no tengo mucha experiencia. El efecto que causa es genial. Pero yo solo quiero aprovechar el brillo que le da a la imagen. No los bordes redondeados.
¿Cómo hago para deshabilitar el tema de los bordes?
Gracias

mariano
Publicado: 13/02/2012 2:10 pm

el link para descargar esta roto

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)