Om du inte har märkt, är fyrkantiga avatarer så 2010. Dessa dagar cirklar är alla raseri. Varje app som är värt sitt salt, från vägen till Basecamp, hoppar ombord på denna fluga och vinkar farväl till de torg som är fasta i det förflutna.
Vart den främre tänkaren frågade jag mig själv, vad är nästa? Låt oss se bortom torg och cirklar och in i avatarens framtid! Med CSS och Webkit kan vi använda ganska mycket form som mask för en avatar. Låt oss se hur.
Varning: Endast webbkit
Dagens projekt är bara en rolig framtid på en design trend som du utan tvekan kommer att dyka upp när CSS-maskering förbättras i framtiden. För närvarande är Webkit verkligen den enda webbläsaren som är utrustad nog för att dra av sådana galna prestationer, så du måste vänta en stund för att få dessa effekter att träna i produktion.
Metod 1: Webkitmasker
Den första metoden som vi ska använda är ganska enkel. Det utnyttjar webkit-mask-image egenskap att använda en bild som masken för en annan.
Ta två bilder
För att börja, behöver du två bilder. Den första bilden är profilbilden. Detta kan vara vad du vill, men som ett generellt tips för udda formade avatarer, försök att se till att du har gott om huvudrum. Om du använder ett foto som är för hårt beskuren runt ditt ansikte, kommer du att sluta med ett konstigt klipp där delar av ditt ansikte är huggade av.
När du har valt ut det är det dags att bygga din mask. Du kan göra det med nästan alla bildredigerare (Photoshop, Illustrator, etc.). Ta bara ut den form som du vill använda som en mask, spara sedan den med en transparent bakgrund som antingen en PNG eller SVG.
Tänk på att sakerna blir smidigare om ditt foto och mask är så nära storlek som möjligt. Annars kan du hamna med ett konstigt resultat som kräver mycket tweaking.
html
Implementering av CSS maskmetoden är galen lätt. För HTML, behöver du inte något speciellt, bara kasta in en bild:
Lägg märke till att texten här är söt funky. Dessa är flyktkoderna för en diamant, stjärna och hjärta.
CSS
Nu är det dags att utforma dessa former med lämplig bakgrundsbild. Vi kan använda webkit-bakgrund-clip med ett värde av text att använda innehållet i vår h4 som mask för bakgrundsbilden som vi tillämpar.
Som du kan se ställer vi in bakgrundsbilden att inte upprepa och använder positioneringsvärden för att nudge bilderna till en plats där ansikten är på ett bra ställe. Det här är lite av en rättegångsprocess, bara fina med värdena tills du får något du gillar.
demo
Som du kan se i demo, genererade varje escape-kod en annan form, som sedan användes för att maskera bilden som vi lade bakom den.
demo: Klicka här för att starta demo.
För-och nackdelar
Med tanke på att ikoner är så mångsidiga är det verkligen lätt att dra av många olika former med hjälp av denna metod. Det är förmodligen ännu enklare att sätta upp än den tidigare metoden och är grundad för variation.
Det sägs att webbläsare utan webkit verkligen förstör den här. Chris Coyier har ett förslag på att använda bakgrundsbilder med Modernizr för en acceptabel fallback, men det visar bara texten utan bilden, vilket inte är det bästa alternativet för avatarer.
Slutsats
Under de närmaste åren kan vi förmodligen förvänta oss att se webbappar öka variationen av avatarformer. Tyvärr är CSS för tillfället inte det bästa sättet att åstadkomma denna effekt.
Om du har för avsikt att gå vidare med någonting så här, skulle mitt förslag vara att använda Webkit-masker, helt enkelt för att allt ska se bra ut om och när de misslyckas på andra webbläsare.