CSS básico. Ejemplo con imágenes redondas (y 2)

Y vamos ya a redondear esta mini serie de entradas.

Decía en el anterior post que esto de hacer imágenes redondas con CSS, sin necesidad de estar editándolas una a una con un programa, es muy sencillo. Pero claro, esto es así si se sabe un poco de ese lenguaje, de lo contrario es poco menos que una m:i2.

Pero como ya hemos visto los conceptos básicos sobre CSS ahora intentaremos aplicarlos con este ejemplo.

De lo que se trata es de subir una imagen de manera normal (HTML) y luego añadir algo en nuestra hoja de estilo que la transformará de manera que la silueta exterior sea un círculo... o al menos una forma redonda. Esto dependerá de las proporciones de la imagen que utilicemos.

Digo que subiremos la imagen, pero también sirve para cualquiera ya subida y que se marque adecuadamente aunque sea a posteriori como veremos. De hecho podremos aplicar este efecto a una imagen en concreto, a todas las de una zona o a todas las del blog. Eso ya dependerá de vuestros gustos.

Marcando el HTML

Evidentemente lo primero que necesitamos para redondear una imagen es una idem. El código puede complicarse lo que sea, pero una imagen se construye con la etiqueta img y tiene básicamente esta pinta:

<img src="DIRECCION_IMAGEN"/>

Así es como logramos que se vea algo como lo de la izquierda. Normalmente debería llevar también un alt con un texto y en ocasiones lleva unas dimensiones forzadas (con width y/o height). Cuando se suben desde el editor de Blogger ese código queda además dentro de un enlace que apunta a la imagen a tamaño original.

Pero si queremos que esa imagen pueda ser configurada desde CSS, necesita incorporar una marca. Esa marca será un selector que crearemos nosotros u otro que ya pudiera llevar previamente. Podemos encontrarlo (o añadirlo) de dos maneras: dentro de la etiqueta img o en la caja padre. Yo lo voy a bautizar como redondo y respectivamente, las dos maneras apuntadas antes serían estas:

<img class="redondo" src="DIRECCION_IMAGEN"/>

<div class="redondo">
<img src="DIRECCION_IMAGEN"/>
</div>

La cuestión básica es que para que el intérprete del navegador sepa que esa imagen en concreto tiene que llevar un estilo determinado, evidentemente hay que etiquetarla de alguna manera. Esa etiqueta es sencillamente indicarle que tendrá la clase X, en este caso redondo.

Aplicando estilo a todos los elementos homogéneos

Pero por si sola esa marca no hará nada. Necesita ser relacionada con una regla de estilo que le indique qué hacer con ella. Por mucho que añadamos clases, si estas no están definidas en el CSS, el aspecto de la imagen (o el elemento que sea), no cambiará.

Para cambiar la forma de TODAS las imágenes de nuestro blog, esto sería lo que habría que añadir a nuestro CSS:

img {
border: 2px solid grey;
margin: 0;
padding: 0;
border-radius: 800px;
overflow: hidden;
}

¿Y esto cómo lo traduce nuestro navegador? De la siguiente manera:

Busca imágenes mediante su nombre de etiqueta (img) y aplícale los siguientes formatos

• un borde de 2 píxeles, sólido y de color gris (grey)
• si tiene márgenes o padding anúlalos y déjalos a cero
• el marco de la caja que sea redondo en sus cuatro esquinas
• por último, todo lo que sobresalga de ese marco, escóndelo, que no se vea (hidden)

Bueno pues ahora que tenemos esa regla en nuestra hoja de estilo sí que ya se verán TODAS las imágenes como queríamos, como en el ejemplo de la derecha.

Para declarar una propiedad correctamente tenemos que conocer qué hace y cómo se ha de redactar y eso lo podréis encontrar en muchos sitios, aunque la autoridad en esto es W3C.

Por ejemplo  border-radius necesita en un principio 4 valores que leídos de izquierda a derecha representarían la curvatura de las esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda. Si se pone un sólo valor se sobrentiende que los cuatro serán iguales a ese.

También convendría conocer que cuando el valor de la curva supera las dimensiones de la caja, la curva se adapta a esta formando un círculo. Si pongo 800px es para pasarme de largo con cualquier imagen de tamaño "normal" en un blog y que no se quede ovalada si me quedo corto con el radio.

Evidentemente la tarea para casa es ir aprendiendo todas las propiedades que existen y su sintaxis, cosa que es imposible desarrollar en un par de posts.

Aplicando estilo a todos los elementos del mismo bloque

Pero seguramente no queramos que todas las imágenes del blog sean redondas, sino sólo las que nosotros queramos, porque de otra manera hasta la cabecera tendrá esta forma. Antes hemos usado una etiqueta html (img) y no un selector y por ese motivo el estilo afectará a todas las imágenes.

Para evitarlo podemos hacer una de las cosas que vimos al principio y que era meter la imagen dentro de un div con la clase redondo. De esa manera sólo las imágenes que estuvieran dentro de una caja con esa clase se verán afectadas por la regla que las hará redondas.

<div class="redondo"><img src="DIRECCION_IMAGEN"/></div>

Pero la regla entonces no debería atacar a la etiqueta img directamente, sino al selector redondo. En ese caso habría que redactarla así:

.redondo img {
border: 2px solid grey;

etc...

Y la traducción sería algo así como aplicar el estilo sólo a las imágenes que estén dentro de una caja con clase redondo.

La ventaja de esto es que en muchas ocasiones no tendremos que crear ningún selector ex-profeso para modificar algo. Por ejemplo, en Blogger todas las imágenes del cuerpo principal para el contenido de las entradas ya están dentro de una caja que por lo general se llama post o post-body.

Así, si el selector que usamos es .post-body img, sólo las imágenes dentro del bloque de entradas se verán afectadas por el estilo que programemos con la ventaja de que no tendremos necesidad de crear un nuevo selector. Esto será normalmente lo que más utilicemos.

Aplicando estilo a un solo elemento

Lo último que me queda ya por explicar es cómo modificar el estilo de un solo elemento (una sola imagen siguiendo el ejemplo). Esto se hace añadiendo inline la clase por nosotros preparada y es lo que avanzamos al principio del post.

<img class="redondo" src="DIRECCION_IMAGEN"/>

Pero como antes, el selector a utilizar no sería exactamente igual a los utilizados hasta ahora, sino...

img.redondo {
border: 2px solid grey;
margin: 0;
padding: 0;
etc...

...lo que se interpreta cómo busca sólo las etiquetas img que tengan la clase redondo.

Epílogo

Para cerrar el tema secundario de lo de redondear imágenes, tenéis que tener en cuenta que si estas no son cuadradas, en lugar de salir con forma circular os aparecerán como óvalos.

Para solucionarlo se deberá incluir en la regla que vimos un width y un height con idéntica medida (valor en píxeles) para forzar el recorte de la imagen y que esta aparezca perfectamente circular.

Y sobre el tema principal (hojas de estilo), esto que en principio era sólo para explicar lo de las imágenes redondas se ha convertido casi sin querer en un mini-cutre-cursillo-express de CSS bastante deficiente y según escribía me daba cuenta de que me quedaban muchas cosas por explicar o desarrollar. Pero sinceramente no me veo capaz de realizar un buen manual sobre este tema y pienso que aún así, esto le podrá venir bien a alguien para hacer entendible lo que muchas veces se reduce a copiar y pegar, así que... ¡ahí queda!

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter