SummArg | Cursos y recursos para webmasters

20/12/2010

Imagenes con bordes redondeados para todos los navegadores

IMGr es un plugin para la librería jQuery que nos permite redondear los bordes de nuestras imágenes utilizando CSS3 en los navegadores modernos que lo soportan y VML en los que no. Admite la configuración de los bordes permitiendonos estilos diferentes en cada esquina, cambio de colores, estilo, etc. Es totalmente no-obstrusivo permitiendo que el elemento <img> no necesite modifiaciones.

Su modo de uso es extremadamente sencillo. Descargamos el plugin IMGr y luego linkeamos en el <head> de nuestro documento:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgr.js"></script>

Luego inicializamos el script, puede colocarse entre etiquetas <head> o bien antes del cierre de </body>

<script type="text/javascript">
$(document).ready(function(){
 $("img.ex1").imgr({size:"3px",color:"yellow",radius:"10px"});
 // busca elementos <imf> con class="ex1"
 // IMGr asigna un borde de 3px, color amarillo y 10px de redondeado a las esquinas.
 $("a#update").click(function(){
 $("img.ex1,img.ex2,img.ex3").imgr({radius:"20px"});
 return false;
 // Busca todos los elementos <img> con clase "ex1, ex2, y ex3"
 // IMGr aplica 20px de redondeado a las esquinas, preservando otras propiedades pre-existentes
 });
});
</script>

Podemos ver el demo en acción en este link así también como la explicación de todas las opciones disponibles. Es compatible con la mayoría de los navegadores actuales.

Dejar un comentario

  1. […] de una imagen con PhotoshopLo mas práctico en un website para lograr bordes redondeados es el fabuloso plugin para jQuery llamado IMGr, del cual ya hablamos en SummArg. Pero si por alguna razón necesitamos aplicar el efecto a un […]

Dejar un comentario