Typografi är allas favoritleksak i webbdesign. Ett särskilt roligt verktyg som CSS ger dig att spela med din typ är text-shadow, som verkar enkelt nog först men kan användas för att skapa några anmärkningsvärda effekter med lite uppfinningsrikedom och kreativitet.
Idag ska vi springa igenom flera text-shadow exempel som du kan kopiera och klistra in för ditt eget arbete.
Den grundläggande skuggan
De text-shadow egendom är super lätt att arbeta med och fungerar bra överallt modern webbläsare utan lika mycket som ett leverantörs prefix! Men med hjälp av verktyg som Modernizr kommer du att hjälpa dig att dra av avancerade CSS3-effekter även i äldre webbläsare, om du behöver back-support.
Syntax
Syntaxen för att skapa en enkel text-shadow visas nedan. Du har fyra variabler att arbeta med, de första två anger din skuggans position, den tredje sätter mängden sudd och den fjärde skuggans färg.
Om du gör det här, är det här ett exempel med en skugga som har flyttats ner två pixlar och rätt fyra pixlar med en trepunkts oskärpa och en svart färg med 30% opacitet.
Här är resultatet av denna kod, en fin enkel skugga som är ganska tilltalande av sig själv.
Varför rgba?
Som en snabb notering behöver du inte använda rgba för färgen på din skugga, men kan använda någon av CSS-färgmetoderna. Jag finner emellertid att rgba är den perfekta färginställningen för en skugga eftersom den lägger till ytterligare en dimension att arbeta med. Inte bara kan du ställa in skuggans position, oskärpa och färg, du kan också ställa in opacitet med alfabetet.
Det här är faktiskt enklare än att arbeta med andra färgmetoder eftersom du oftast måste leta efter en anständig accent till bakgrundsfärgen som kanske är något mörkare eller lättare. Med rgba kan du bara använda svart eller vitt och minska opacitet för att blanda den med bakgrunden.
Snabb och smutsig brevpress
Det stora med text-skuggor är att du faktiskt kan göra mycket mer med dem än din genomsnittliga droppskugga. Till exempel, här är ett snabbt trick för att skapa illusionen av insettext.
Det första du vill göra är att ställa in din textfärg till en något mörkare nyans än din bakgrundsfärg. Använd sedan ett litet vitt text-shadow med minskad opacitet.
Som du kan se använde jag en bakgrundsfärg på # 222 och ställde sedan texten till svart vid 60% opacitet. Slutligen var min vita skugga placerad bara lite nere och till höger med 10% opacitet.
Hård skugga
Kom ihåg att du inte behöver slita din skugga alls. På grund av sin retro natur är hårda textskuggor faktiskt mycket? just nu så gärna experimentera med dem i dina mönster.
Dubbelskugga
Den riktiga kul börjar när du inser att du inte är begränsad till en enda skugga. Med ett komma för att skilja deklarationerna kan du ansöka så många skuggor som du vill!
Här är den grundläggande översikten av syntaxen. Observera att det finns kommatecken efter de två första skuggorna och en semikolon efter den sista skuggan.
Om du gör det här är det ett exempel med en textbehandling som du kan se över hela webben just nu. Tanken är att i princip tillämpa två skuggor, vars första är samma färg som din bakgrund.
Resultatet är nästan en vintage tidning känsla.
Ned och avstånd
När du väl börjar lägga på skuggorna blir resultaten snabbt allt mer imponerande. Det är väldigt enkelt att börja skapa några fina 3D-effekter som dina webbdesigniga kunniga användare inte kommer att tro på är live-text.
Nedan använde jag en hel del fyra skuggor, alla pekade rakt ner med varierande grader av avstånd och oskärpa.
Stäng och Tung
Här är ett annat exempel på samma idé, den här gången med tre skuggor som har hållits mycket närmare källan. Effekten gör din text lite tyngre.
Lite hjälp
Att leta efter vad andra designers har gjort fann jag två utmärkta tekniker som jag tyckte var perfekt för detta inlägg. Den första kommer från Mark Dotto och den andra från Gordon Hall.
Mark Dotto seriöst 3D-text
Här är ett exempel som jag alltid tänkt såg väldigt imponerande ut. Den kommer från MarkDotto.com och använder en imponerande tolv separata skuggor för att dra av en mycket trovärdig 3D-effekt.
Gordon Halls True Inset Text
Observera i exemplet ovan jag kallade min teknik "Snabb och smutsig?" brevpress effekt. Det beror på att det finns ett mycket mer inblandat sätt att skapa en seriöst insettext som är mycket mer trovärdig.
Gordon använder några seriösa CSS voodoo för att dra av inte bara en yttre skugga utan också en äkta inre skugga. Kolla in hans blogginlägg för en fullständig förklaring av tekniken.
Mer roliga skuggor
Nu när du har en bra känsla för logiken bakom koden, är det några exempel som jag piskade upp med de tråkiga förklaringarna. Känn dig fri att stjäla dem och använda dem i ditt arbete!
Lysande
Superhjälte
Flera ljuskällor
Mjuk prägling
Slutsats
Som de flesta CSS-effekter är textskuggor extremt enkla att implementera i en grundläggande form, men kan ta på sig olika former om du verkligen lägger lite arbete på dem. Med kommatecken som en separator kan du stapla CSS-skuggor ovanpå varandra för att dramatiskt lägga till intresse och realism för effekten.