Imágenes con esquinas redondeadas y brillo utilizando javascript

Publicado por Nikko el dia 21 Jul 2007 - Guardado en Diseño, Scripts Leido 2,197 Veces

Glossy.js 1.3 es una pequeña librería Javascript que nos permite agregar instantáneamente esquinas redondeadas a las imágenes de nuestra web, evitando de esta forma tener que caer en la edición individual de cada una de ellas. El efecto que lograremos será el siguiente:

glossy.jpg

Instalación:

Primero descargamos la librería Glossy.js y la alojamos en nuestro servidor.
Hacemos el llamado a la librería agregando en nuestro encabezado, antes de la etiqueta < / HEADER > lo siguiente:

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

Modo de uso:
Cuando deseamos usarla agregamos a nuestras imágenes la clase “glossy”
EJ:

HTML:
<img src="images/foto.jpg" class="glossy" />

Otros Parámetros:
Radios
Podremos varias el radio del efecto agregando “iradius” seguido por el radio deseado en porcentaje clase “iradius25” (min=20 max=50 default=25 del radio) La foto que acompaña el post posee un radio de 50.
Ej:

HTML:
<img src="images/foto.jpg" class="glossy iradius25" />

Color de fondo:
Podremos variar el color de fondo agregando “ ibgcolor” seguido por el color deseado expresado en hexadecimal: (max=ffffff min=000000 default=0)
EJ:

HTML:
<img src="images/foto.jpg" class="glossy ibgcolor000000" />

Color de gradiente:
Podremos variar el color del gradiente agregando” igradient” seguido por el color deseado
(Max=ffffff min=000000 default=0)

HTML:
<img src="images/foto.jpg" class="glossy igradient000000" />

Icono-Web

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. joshua - Gravatar

    joshua

    21-07-2007

    Permalink

    muy bueno :)

    lo probare :p

  2. NicolEojo - Gravatar

    NicolEojo

    21-07-2007

    Permalink

    La verdad muy bueno el efecto, recien lo puse a probar en mi página, ademas que en IE tambien se ve (bueg)

  3. Angelfire - Gravatar

    Angelfire

    21-07-2007

    Permalink

    Creo que tendré que conseguirle mas lectores a mi blog :P , hace como 1 mes publique un post sobre este script >_

  4. hdbch - Gravatar

    hdbch

    21-07-2007

    Permalink

    excelenteeeeeeeeeeee....!

  5. Chicoblog - Gravatar

    Chicoblog

    21-07-2007

    Permalink

    Fantastico Script!

    Lo probare, muchas gracias ^^

    Saludos!

  6. Caboprcdt - Gravatar

    Caboprcdt

    21-07-2007

    Permalink

    Exelente,muy bueno

    Lo acabo de hacer y modifique varios parametros y me funciono

    Gracias por compartir

  7. Rodrigo - Gravatar

    Rodrigo

    21-07-2007

    Permalink

    Excelente script.... Sencillamente genial

  8. julio - Gravatar

    julio

    21-07-2007

    Permalink

    tratare de ocuparlo gracias compadre, parece genial...

  9. [...] informacion en | Xiberneticos Tambien te puede [...]

  10. [...] de las ya recomendadas Glossy.js 1.3 y Instant.js 1.0, veo en ajaxian que Christian Effenberger nos trae otro nuevo script con nuevo [...]

  11. cintia - Gravatar

    cintia

    21-07-2007

    Permalink

    Excelente...me ha ayudado muchisimo.

    Muchas gracias....



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: