Au cas où vous ne l'auriez pas remarqué, les avatars carrés sont alors 2010. Les cercles de nos jours sont à la mode. Chaque application digne de ce nom, de Path to Basecamp, saute à bord de cette lubie et fait ses adieux aux carrés qui sont coincés dans le passé.
Jamais le penseur, me suis-je demandé, "quelle est la prochaine?" Regardons au-delà des carrés et des cercles et dans l'avenir de l'avatar! En utilisant CSS et Webkit, nous pouvons utiliser à peu près n'importe quelle forme comme masque pour un avatar. Voyons comment.
Avertissement: Webkit uniquement
Le projet d’aujourd’hui n’est qu’un simple regard ludique sur une tendance de conception que vous verrez sûrement apparaître au fur et à mesure que le masquage CSS s’améliorera à l’avenir. Pour le moment, Webkit est vraiment le seul navigateur suffisamment équipé pour réaliser de tels exploits, alors vous devrez attendre un moment avant de pouvoir mettre ces effets en pratique en production.
Méthode 1: masques de kit Web
La première méthode que nous allons utiliser est assez simple. Il utilise le masque-web-image propriété d'utiliser une image comme masque pour une autre.
Prenez deux images
Pour commencer, vous avez besoin de deux images. La première image est la photo de profil. Cela peut être ce que vous voulez, mais comme conseil général pour les avatars aux formes étranges, veillez à ce que vous disposiez de suffisamment d'espace pour la tête. Si vous utilisez une photo trop serrée autour de votre visage, vous obtiendrez un clip étrange où des parties de votre visage seront coupées.
Une fois que vous avez choisi l'avatar, il est temps de construire votre masque. Vous pouvez le faire avec n'importe quel éditeur d'image (Photoshop, Illustrator, etc.). Dessinez simplement la forme que vous souhaitez utiliser comme masque, puis enregistrez-la avec un arrière-plan transparent au format PNG ou SVG.
Gardez à l'esprit que les choses iront mieux si votre photo et votre masque sont aussi proches que possible. Sinon, vous pourriez vous retrouver avec un résultat étrange qui nécessite beaucoup de peaufinage.
HTML
L'implémentation de la méthode du masque CSS est une tâche facile. Pour le HTML, vous n'avez besoin de rien de spécial, ajoutez simplement une image:
Notez que le texte ici est plutôt funky. Ce sont les codes d'échappement pour un diamant, une étoile et un coeur.
CSS
Il est maintenant temps de styliser ces formes avec l'image d'arrière-plan appropriée. On peut utiliser webkit-background-clip avec une valeur de texte utiliser le contenu de notre h4 comme masque pour l’image d’arrière-plan que nous appliquons.
Comme vous pouvez le constater, nous configurons les images d'arrière-plan pour qu'elles ne se répètent pas et nous utilisons des valeurs de positionnement pour déplacer les images dans un endroit où les visages sont bien placés. Ceci est un peu un processus d’essais et d’erreur, il suffit de manipuler les valeurs jusqu’à ce que vous obteniez quelque chose que vous aimez.
Démo
Comme vous pouvez le voir dans la démo, chaque code d'échappement a généré une forme différente, qui a ensuite été utilisée pour masquer l'image que nous avons placée derrière celle-ci.
Démo: Cliquez ici pour lancer la démo.
Avantages et inconvénients
Étant donné que les icônes sont si polyvalentes, il est vraiment facile de tirer beaucoup de formes différentes en utilisant cette méthode. Il est sans doute encore plus facile à configurer que la méthode précédente et elle est prête à la variation.
Cela étant dit, les navigateurs non-Webkit détruisent vraiment celui-ci. Chris Coyier a suggéré d’utiliser Background-Clip avec Modernizr pour un repli acceptable, mais il ne fait que montrer le texte sans image, ce qui n’est pas la meilleure option pour les avatars.
Conclusion
Dans les prochaines années, on peut s’attendre à voir les applications Web augmenter la variation des formes d’avatar. Malheureusement, pour le moment, CSS n'est pas vraiment la meilleure façon de parvenir à cet effet.
Cependant, si vous êtes déterminé à aller de l'avant avec quelque chose de ce genre, ma suggestion serait d'utiliser des masques Webkit, tout simplement parce que tout devrait toujours avoir l'air décent s'il échoue sur d'autres navigateurs.