¿Avatares redondos y algo más grandes? Fácil con CSS

Esto es tan fácil que casi me da vergüenza publicarlo, pero se sale de lo normal y eso ya es un motivo para que a alguien le pueda resultar interesante.

Avatar normal
Avatar circular

Para conseguir que los avatares que se muestran junto a los comentarios, se vean redondos en lugar cuadrados, no hay mas que localizar la clase CSS que los gobierna y aplicar la propiedad border-radius.



border-radius nos sirve, como su traducción casi nos indica, para crear bordes redondeados. En este generador online podéis ver cómo funciona esa propiedad si no la conocéis y a la derecha, una demo con dos enlaces para visualizar lo que pretendemos conseguir.


Como queremos que la silueta sea absolutamente circular, el valor en píxeles del radio de la curva, tendrá que ser al menos el de la mitad del ancho del cuadrado a reconvertir. Traducción: valor=la mitad del ancho. De todas formas creo que no hay inconveniente en que sea un valor mayor como vamos a ver y así eliminamos posibles fallos por efecto de la incorporación de bordes.

En Blogger los avatares son de 36x36 px así que esa medida es la que nos sirve para esta plataforma. En cuanto a la clase, esta es .avatar-image-container. Si queremos abundar, para el que tenga los nuevos comentarios anidados le ponemos .comments delante:

.comments .avatar-image-container {
border-radius: 36px;
}

Y ya está, con eso tenemos nuestros avatares redondos y ahora sólo vamos a mejorar un poquito.

Si queremos que esto nos funcione en el máximo posible de navegadores, aunque sean versiones antiguas, le añadimos los kits de compatibilidad de los más usuales. Cuando hagáis esto no olvidéis que la propiedad original (sin prefijos), debe ir la última, detrás de las otras. De paso añadimos también un borde del color que prefiramos:

.comments .avatar-image-container {
border: 2px solid #000000;
-webkit-border-radius: 36px; /*Safari-Chrome*/
-moz-border-radius: 36px; /*Firefox*/
border-radius: 36px;
}

---

Cómo hacerlos más grandes


Los avatares son algo pequeños en Blogger y este ajuste los hace parecer todavía más diminutos debido al "recorte" de las esquinas. Por eso y como complemento, vamos a ver la forma de hacerlos redondos y al mismo tiempo agrandarlos un poco.

Lo del tamaño está algo limitado por la calidad de la miniatura que Blogger proporciona y por eso siempre estoy hablando de un cambio de poca envergadura. El motivo es que la imagen es de 36px y si ampliamos demasiado con CSS, esta simplemente se redimensiona y la calidad resultante es muy deficiente. A la izquierda un ejemplo de una imagen de 36px ampliada a 100px.

Sin embargo, si ampliamos sólo un poco, nuestros ojos no percibirán tanto esa deficiencia. Servidor está usando actualmente una redimensión de 48px y creo que el resultado es satisfactorio.

En este caso habría que ajustar el ancho y el alto del contenedor y lo mismo para la imagen, cosa que hacemos con el siguiente código. Si sólo queréis ampliar el avatar, quitamos el border-radius y listo.

.comments .avatar-image-container {
overflow: hidden;
width: 48px;
height: 48px;
max-height: 48px;
border: 4px solid $#000000;
border-radius: 48px;
}
.comments .avatar-image-container img {
width: 48px;
height: 48px;
}

No tengo ninguna plantilla para hacer la prueba con el sistema de comentarios antiguo, pero creo recordar que las clases que se usaban para los avatares eran estas mismas. En ese caso, con quitar .comments de los anteriores códigos, el sistema os funcionará igualmente sin problemas.

16-Feb-2012. Se me olvidó que esta era una entrada BPT (Blogger Para Torpes) y no avisé de que la parte de estilo (CSS), en Blogger va entre las etiquetas SKIN. Por tanto, estos códigos hay que insertarlos antes de }]]></b:skin> para que funcionen.

¿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