Muestra tus avatares e imágenes con formas muy personales 5.12.12
Si estás cansado de mostrar los avatares con formas rectangulares o como mucho redondeadas con border-radius, puedes ir un pasito más allá y hacer que se muestren en forma de estrella, corazón, carita sonriente o cualquier otra que se te ocurra.
Muestra tus avatares e imágenes con formas muy personales
Si estás cansado de mostrar los avatares con formas rectangulares o como mucho redondeadas con border-radius, puedes ir un pasito más allá y hacer que se muestren en forma de estrella, corazón, carita sonriente...
Bueno, de hecho, si ya usas alguna tipografía de iconos o pictogramas, podrás mostrar las imágenes con cualquier forma contenido en ella.
Antes de seguir, sólo es funcional en los navegadores webkit.
Marcado Html
Lo primero es el html, tan sencillo como:
<div class="avatares">
<h6 class="uno">♥</h6>
<h6 class="dos">♣</h6>
<h6 class="tres">♦</h6>
</div>
Para el ejemplo yo utilizo tres entidades html: un corazón ♥, un trébol ♣ y el diamante ♦. Pero con ayuda de la regla @font-face podrás optar por cualquier otro símbolo incluido en alguna de las muchas tipografías de iconos.
Lo siguiente es declarar el Css común a todos los avatares. Que como son texto, pues serán las propiedades relativas a él:
h6 {
color: #000;
font: 250px/1.5 helvetica, sans-serif;
display:inline-block; /*sólo a efectos de mostrarlos en una línea*/
}
Y a continuación introducir la imagen del avatar característica de cada h6:
h6.uno {
background: url(avatar-1.jpg) -40px 120px no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h6.dos {
background: url(avatar-2.jpg) -40px 120px no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Como ves, la imagen está colocada vía background, y en función de las particularidades de cada imagen y del tamaño del texto elegido habrá que colocarla convenientemente con background-position.
Y hacer uso de las propiedades que lo hacen posible: -webkit-background-clip y -webkit-text-fill-color
En las pocas pruebas que he hecho para este post, por alguna razón que desconozco, en mi versión de Chrome, si declaras estas dos propiedades en el selector general h6 en vez de encada uno de los h6.uno, h6.dos del ejemplo, el efecto desaparece y no se produce el recorte de la imagen.
Y el resultado final para tres avatres o iconos sería el de la imagen:
Como es tan sencillo no te pongo demo en vivo, sólo es cuestión de que copies el html y css y lo veas por tu cuenta. Así de paso, juegas un poco con css. Que es de lo que se trata.
Segunda vía: máscaras Css
Un a segunda forma de lograr mostrar tus imágenes con formas de lo más variadas es utilizando la propiedad privativa -webkit-mask-image.
Para ello sólo se necesita tener una imagen en formato png o svg con una forma característica. Para el ejemplo la imagen de la derecha. Como ves, no me esforcé demasiado al crear la máscara.
Y por supuesto la imagen que queremos mostrar, que en este caso incluimos vía src en el html:
<img class="mascara_css" src="imagen.jpg" alt="" />
Y a continuación sólo una línea de css para lograr el efecto de mostrar nuestra imagen con una forma totalmente personalizada:
img.mascara_css {
-webkit-mask-image: url(mascara.png);
}
El resultado de esa simple propiedad es el que ves a la derecha. Tu imagen recortada y mostrada de acuerdo con la máscara que define el png o svg seleccionado.
La ventaja de este método respecto al primero es que en los demás navegadores no se produce el recorte y la imagen se muestra completa.
Amplía información
Con posterioridad a este artículo, el 20 de Diciembre, Christian Schaefer aka @derSchepp publica su artículo "CSS Masks – How To Use Masking In CSS Now" en el que explica cómo lograr este mismo efecto en múltiples navegadores y versiones.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso