Bordes redondeados en imágenes con CSS 3 y jQuery




CSS 3 tiene la propiedad border-radius que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados.

Solución

En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>
Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase:rounded-img o rounded-img2. Ejemplo:
<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />
Y por último, se definen estas clases CSS en el header del documento o el archivo de estilos:
.rounded-img {
 display: inline-block;
 border: solid 1px #000;
 overflow: hidden;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
 box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
 display: inline-block;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
 -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
 box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Explicación

La propiedad border-radius no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.
El script oculta la imagen (con opacity:0) y la envuelve con un elemento <span> que tiene a la misma imagen como fondo.

Conclusión

Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.



ESCRITO POR WitCho

¡Hola! Mi nombre es Juan González y tengo 20 años. He fundado este sitio para ayudar a todas las personas que se inician en el mundo del Blogger. Aquí encontrarás diversos aportes, herramientas, efectos (jQuery), trucos y JSON, para que tu blog vaya mejorando día a día, así de fácil.



Si este artículo te gustó, por favor selecciona alguno de los siguientes servicios para compartirlo:



  • Vemos otro post cualquiera por si le encontraras alguna utilidad?



  • ¿Quieres seguir obteniendo trucos iguales que este? Entonces, suscríbete a nuestro RSS Feed.

    Por favor, ingresa tu correo electrónico

    ¡Mira que fácil! No has tardado nada, y a partir de ahora, podrás recibir tods nuestras entradas por correo.








    Antes de realizar ningún cambio, te recomendamos que "respaldes" la plantilla, para evitar, así, futuros problemas. Quizá, en algún momento te sirva de ayuda en algún... apreto


    Ir al centro | Ir arriba | Ir abajo



































    Logo de Android Honeycomb creado con propiedades de CSS3 por Manz (Emezeta blog), y después modificado por Juan