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:
Si noti che il testo qui è piuttosto originale. Questi sono i codici di fuga per un diamante, una stella e un cuore.
CSS
Ora è il momento di modellare queste forme con l'immagine di sfondo appropriata. Possiamo usare webkit-background-clip con un valore di testo per utilizzare il contenuto del nostro h4 come maschera per l'immagine di sfondo che applichiamo.
Come puoi vedere, stiamo impostando le immagini di sfondo da non ripetere e utilizzando i valori di posizionamento per spostare le immagini in un punto in cui i volti si trovano in una posizione ottimale. Questo è un po 'un processo di prova ed errore, basta armeggiare con i valori fino a ottenere qualcosa che ti piace.
dimostrazione
Come puoi vedere nella demo, ogni codice di escape ha generato una forma diversa, che è stata poi utilizzata per mascherare l'immagine che abbiamo posizionato dietro di esso.
demo: Clicca qui per avviare la demo.
Pro e contro
Dato che le icone sono così versatili, è davvero facile estrarre un sacco di forme diverse usando questo metodo. È probabilmente ancora più semplice da configurare rispetto al metodo precedente ed è predisposto per la variazione.
Detto questo, i browser non Webkit distruggono davvero questo. Chris Coyier ha un suggerimento per l'utilizzo di background-clip con Modernizr per un accettabile fallback, ma mostra semplicemente il testo senza l'immagine, che non è l'opzione migliore per gli avatar.
Conclusione
Nei prossimi anni, probabilmente ci aspettiamo di vedere le app web aumentare la variazione delle forme dell'avatar. Sfortunatamente, per il momento, i CSS non sono davvero il modo migliore per ottenere questo effetto.
Se sei intenzionato ad andare avanti con qualcosa di simile, però, il mio suggerimento sarebbe di usare le maschere Webkit, semplicemente perché tutto dovrebbe comunque apparire decente se e quando falliscono su altri browser.