En caso de que no lo hayas notado, los avatares cuadrados son. asi que 2010. Estos días los círculos están de moda. Todas las aplicaciones que valen la pena, desde Path to Basecamp, saltan a bordo de esta moda y se despiden de las plazas que están atrapadas en el pasado.
Siempre el pensador avanzado, me pregunté, ¿qué sigue? ¡Miremos más allá de los cuadrados y círculos y en el futuro del avatar! Usando CSS y Webkit, podemos usar casi cualquier forma como máscara para un avatar. A ver cómo.
Advertencia: sólo webkit
El proyecto de hoy no es más que un vistazo divertido a una tendencia de diseño que, sin duda, verá emerger a medida que el enmascaramiento de CSS mejore en el futuro. Por ahora, Webkit es realmente el único navegador que está lo suficientemente equipado para lograr tales hazañas locas, por lo que tendrá que esperar un tiempo para poner estos efectos en práctica en la producción.
Método 1: Máscaras de Webkit
El primer método que usaremos es bastante sencillo. Utiliza el webkit-máscara-imagen Propiedad para usar una imagen como máscara para otra.
Agarrar dos imágenes
Para empezar, necesitas dos imágenes. La primera imagen es la foto de perfil. Esto puede ser lo que quieras, pero como una sugerencia general para los avatares de formas raras, asegúrate de tener suficiente espacio para la cabeza. Si usas una foto que está muy recortada alrededor de tu cara, terminarás con un clip extraño donde se cortan partes de tu cara.
Una vez que hayas elegido el avatar, es hora de construir tu máscara. Puede hacer esto con casi cualquier editor de imágenes (Photoshop, Illustrator, etc.). Simplemente dibuje la forma que le gustaría usar como máscara, luego guárdela con un fondo transparente como PNG o SVG.
Tenga en cuenta que las cosas se pondrán más suaves si su foto y máscara tienen el tamaño más cercano posible. De lo contrario, podrías terminar con un resultado extraño que requiere muchos ajustes.
HTML
Implementar el método de máscara CSS es una locura fácil. Para el HTML, no necesitas nada especial, solo lanza una imagen:
Observe que el texto aquí es bastante funky. Estos son los códigos de escape para un diamante, una estrella y un corazón.
CSS
Ahora es el momento de diseñar estas formas con la imagen de fondo adecuada. Nosotros podemos usar webkit-fondo-clip con un valor de texto para utilizar los contenidos de nuestro h4 como máscara para la imagen de fondo que aplicamos.
Como puede ver, estamos configurando las imágenes de fondo para que no se repitan y usamos valores de posicionamiento para empujar las imágenes a un lugar donde las caras estén en un buen lugar. Esto es un poco de un proceso de prueba y error, solo juega con los valores hasta que obtengas algo que te guste.
Manifestación
Como puede ver en la demostración, cada código de escape generó una forma diferente, que luego se usó para enmascarar la imagen que colocamos detrás.
Manifestación: Haga clic aquí para iniciar la demostración.
Pros y contras
Dado que los iconos son tan versátiles, es muy fácil extraer muchas formas diferentes utilizando este método. Podría decirse que es incluso más fácil de configurar que el método anterior y está preparado para la variación.
Dicho esto, los navegadores que no son de Webkit realmente destruyen este. Chris Coyier tiene una sugerencia para usar un clip de fondo con Modernizr para un respaldo aceptable, pero simplemente muestra el texto sin la imagen, que no es la mejor opción para los avatares.
Conclusión
En los próximos años, es probable que podamos ver que las aplicaciones web aumentan la variación de las formas de avatar. Desafortunadamente, por el momento, CSS no es realmente la mejor manera de lograr este efecto.
Sin embargo, si tiene la intención de seguir adelante con algo como esto, mi sugerencia sería utilizar máscaras de Webkit, simplemente porque todo debería parecer decente si y cuando falla en otros navegadores.