Se non l'hai notato, gli avatar quadrati sono così 2010. In questi giorni i circoli sono di gran moda. Ogni app che vale la pena, da Path a Basecamp, salta a bordo di questa moda e saluta le piazze bloccate nel passato.
Il pensatore di sempre, mi sono chiesto, cosa c'è dopo ?? Guardiamo oltre i quadrati e i cerchi e nel futuro dell'avatar! Usando CSS e Webkit, possiamo usare praticamente qualsiasi forma come maschera per un avatar. Vediamo come.
Avviso: solo Webkit
Il progetto di oggi è semplicemente un divertente guardare avanti a una tendenza del design che sicuramente ti farà apparire come se il mascheramento CSS migliorasse in futuro. Per ora, Webkit è davvero l'unico browser che è abbastanza equipaggiato per tirare fuori tali imprese folli, quindi dovrai aspettare un po 'per mettere in pratica questi effetti nella produzione.
Metodo 1: maschere Webkit
Il primo metodo che utilizzeremo è piuttosto semplice. Utilizza il webkit-maschera-image proprietà per utilizzare un'immagine come maschera per un altro.
Prendi due immagini
Per iniziare, hai bisogno di due immagini. La prima immagine è la foto del profilo. Questo può essere quello che vuoi, ma come consiglio generale per gli avatar a forma di strana, prova ad avere un sacco di spazio per la testa. Se usi una foto tagliata troppo stretta intorno al tuo viso, ti ritroverai con una strana clip in cui parti del tuo viso sono tagliate via.
Una volta che hai scelto l'avatar, è tempo di costruire la tua maschera. Puoi farlo con qualsiasi editor di immagini (Photoshop, Illustrator, ecc.). Disegna semplicemente la forma che desideri utilizzare come maschera, quindi salvala con uno sfondo trasparente come PNG o SVG.
Tieni presente che le cose andranno più fluide se la tua foto e la tua maschera sono il più vicino possibile. Altrimenti, si potrebbe finire con un risultato strano che richiede un sacco di ritocchi.
HTML
L'implementazione del metodo della maschera CSS è semplicissima. Per l'HTML, non hai bisogno di nulla di speciale, basta inserire un'immagine: