Imágenes circulares solamente con CSS 3

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Imagenes-circulares-solamente-con-CSS-3.aspx

Últimamente está muy de moda ofrecer imágenes mejoradas con algún efecto a la hora de presentarlas en las páginas Web.

Por ejemplo, si visitas mi página de Google+ verás que mi foto aparece en forma de círculo, aunque en realidad es cuadrada:

CSS_Imgs_1

La verdad es que queda mucho mejor.

Pero, si la foto que yo subí originalmente es cuadrada, esta con forma circular ¿se genera automáticamente a partir de la original? ¿Cómo se consigue ese efecto?

La respuesta viene de la mano de CSS y el uso inteligente de los bordes.

Bordes redondeados

Vamos a partir de una fotografía cuadrada como la que muestra a continuación:

PuenteBellevue

Se trata de un paso elevado entre dos edificios en Bellevue (WA).

Para conseguir que se visualice recortada en círculo, lo que tenemos que hacer es sacar partido a la propiedad border-radius de CSS 3.

Esta propiedad nos permite definir la curvatura en pixeles u otras unidades que va a tener cada uno de los cuatro bordes de un elemento HTML. Así, por ejemplo, si queremos que un DIV tenga un borde redondeado de trazo liso, con un radio de 20 pixeles de curvatura en las esquinas, sólo tenemos que escribir algo así:

<div style="width:300px; height:150px; border: 2px dashed;background-color:silver;border-radius:20px;">

</div>

Es decir, creamos un recuadro de 300px de ancho y 150 de alto, un borde a rayas de grosor 2px, con color gris de fondo y le indicamos que el radio de las esquinas debe ser de 20 pixeles. Con esto el recuadro resultante sería el siguiente:

CSS_Imgs_2

No muy espectacular, pero mucho más agradable que un simple recuadro normal.

Podríamos especificar que solamente algunas esquinas concretas fueran redondeadas utilizando los atributos CSS específicos para las mismas. Por ejemplo, que la esquina superior izquierda y la inferior derecha sean redondas pero no las otras dos, para lo cual cambiamos el border-radios (que afecta a todas) por esto:

border-top-left-radius:20px;border-bottom-right-radius:20px;

Y obtendríamos este rectángulo:

CSS_Imgs_3

Lo importante aquí para nuestro propósito es que podemos jugar con esos bordes redondeados para conseguir algunos efectos como el deseado de las fotos circulares.

Por ejemplo, si nuestra imagen mide 300×300 px de tamaño, podemos indicar que queremos que el radio de las 4 esquinas redondeadas sea justo la mitad (150px) para obtener lo siguiente:

CSS_Imgs_4

¡Tachán! Es una foto redonda, justo como queríamos.

Lo malo es que hemos tenido que especificar el radio específico para el tamaño de esta foto en concreto y en una página podemos tener fotos de diversos tamaños. Es por eso por lo que destaqué antes que, para el radio, podíamos usar cualquier unidad de medida permitida por CSS. Eso significa que podemos utilizar porcentajes, así que si en lugar de un tamaño fijo indicamos que queremos un radio para las esquinas de un 50% del tamaño (es decir, justo la mitad) obtendremos siempre el efecto circular sea cual sea el tamaño de la imagen:

img.circular {

    border-radius: 50%;

}

Podemos mejorar el aspecto de la foto redonda si además le añadimos algún efecto más con CSS Por ejemplo, si le coloco un borde a rayas y una sombra tenue alrededor, la cosa mejora bastante:

img.circular {

    border-radius: 50%;

    border:1px black dashed;

    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.8);

}

obteniendo lo de la siguiente imagen, un efecto mucho más atractivo:

CSS_Imgs_5

En este caso el efecto que he utilizado es el de sombra con CSS, usando el atributo box-shadow. Éste toma como parámetros el desplazamiento de la sombra desde el centro en horizontal y vertical (en este caso lo he dejado en el centro: 0px, 0px), la distancia adicional desde el borde que deberá ocupar el difuminado de la sombra (50px), la distancia adicional que deberá alcanzar la sobra en si desde los bordes (la parte más oscura, en este caso no quiero que se vea o le haría un círculo negro: la dejo a 0px), y finalmente el color de la sombra. En este caso utilizo el color negro, pero le doy una transparencia del 80% en la componente alfa del color: rgba(0,0,0, 0.8).

Efectos estilo PowerPoint

Gracias a estas técnicas tan sencillas se pueden conseguir otros efectos gráficos interesantes. Por ejemplo, uno de los estilos de imagen automáticos que introdujo Office 2010 y que a mi más me gusta es el llamado “Diagonales Redondeadas Blancas” que podemos ver en la imagen:

CSS_Imgs_6

Gracias a lo que hemos visto en este artículo es muy sencillo conseguir el mismo efecto con CSS en una página. basta con jugar con los bordes redondeados, el color de fondo, los márgenes y las sombras:

img.DiagonalRedonda {

    border-top-left-radius: 20%;

    border-bottom-right-radius: 20%;

    border:1px black solid;

    background-color:white;

    padding:10px;

    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.8);

}

Con esto lo que hacemos es poner los bordes superior-izquierdo e inferior-derecho redondeados a un 20% del tamaño de la imagen, le damos un borde fino al conjunto. A continuación le ponemos un fondo de color blanco y hacemos que haya una separación entre el objeto y el borde. De este modo ese espacio de separación (padding) que está vacío se mostrará del color del fondo, o sea blanco, que es el efecto que buscamos. Finalmente le damos un toque atractivo gracias a una sombra. El resultado es muy bonito:

CSS_Imgs_7

y es exactamente al de PowerPoint que estábamos buscando 🙂

Soporte de navegadores

Los atributos border-radius y box-shadow están soportados a partir de las siguientes versiones de los navegadores:

  • Internet Explorer 9
  • Firefox 20
  • Chrome 26
  • Safari 5.1
  • Todas las versiones de navegadores móviles importantes

Dado que, por lo tanto, están soportados por todos los navegadores modernos ya desde hace años, hoy en día ya no es necesario utilizar los prefijos propios de cada navegador (como -moz o -webkit) para que funcione.

En el caso de Chrome, como se actualiza automáticamente, los usuarios siempre tienen la última versión, pero Safari y Mozilla no se actualizan solos, así que puede que tengamos visitantes a la web que no estén a la última y no les funcione el efecto. Si queremos minimizar el impacto en estos navegadores viejos y que lo vean igual, podemos agregar estas variantes específicas del mismo atributo, quedando de la siguiente manera:

img.circular {

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

}

Con esto conseguiremos que funcione en versiones muy viejas de Firefox y Safari, aunque no en Internet Explorer 8 o anterior. En ese caso se seguirá viendo cuadrada.

En el caso de la sombra, existe un modificador para Webkit (Safari) que es, claro está, -webkit-box-shadow. No es así para el caso de Firefoz ni de IE, por lo que en versiones viejas la sombra simplemente no se visualizará, pero es un problema menor.

Más efectos bonitos en breve

En un próximo post explicaré, por ejemplo, cómo conseguir otros efectos bonitos con CSS e imágenes, como por ejemplo, el efecto “Foto Polaroid” que incluso nos permitirá hacer montajes realistas de las fotos como si estuvieran distribuidas de manera descuidada encima de una mesa (con rotaciones y solapamientos), y incluyendo además letras en el conjunto.

Te dejo el archivo de ejemplo del artículo de artículo aquí para que puedas experimentar con él.

¡Espero que haya resultado útil!

Sin categoría

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *