Super Sweet CSS 3D Text Effects med Sass och mindre

Jag diskuterade nyligen fördelarna och olika funktioner hos CSS preprocessorer med en kollega. Vi täckte alla grunderna: hur det är bra att ha variabler och hur mixins kan spara dig en otrolig mängd kodningstid. När konversationen vände sig till några av de mer dunkla funktionerna trots att saker blev intressanta. När jag tog upp de olika färgoperationerna, utropade min kollega djärvt det som ingen riktig designer? kunde någonsin hitta en legitim ursäkt för att använda den här funktionen och inte plocka sina egna färger manuellt.

I ord av Barney Stinson,? Utmaning accepterad !? Idag ska vi skapa en fantastisk faux 3D-texteffekt med ren CSS och sedan se varför det är mycket lättare att göra det med färgoperationerna i Sass eller LESS.

Låt oss bygga lite 3D-text

Det är inte riktigt en bra sätt att tillämpa en 3D-effekt med hjälp av CSS. Det finns ingen? Text-extrude? egendom, men det skulle faktiskt vara ganska häftigt. Istället måste vi förfalska det. Ett av de mest populära sätten att göra detta är att skapa en hel massa textskuggor (effekten visas av Mark Otto här). Som med CSS-bakgrunder kan textskuggor staplas upprepade gånger för att uppnå några riktigt intressanta resultat.

Tips: IE hatar webbdesigners så det stöder inte något coolt som textskuggor. Använd Modernizr för att kompensera.

Grunden

Låt oss börja långsamt och bygga den grundläggande HTML- och CSS-grunden som vi behöver för att skapa ett bra stort textobjekt att arbeta med. Allt vi behöver för HTML är en h2 med lite text och en enda klass som tillämpas.

Nu för några CSS. För nu, rikta helt enkelt på h2 och tillämpa några grundläggande stilar. Jag förvandlade texten till stor bokstav och använde en del stenografi för att tillämpa en massa typsnitt på en gång: viktstorlek / linjehöjd typfamilj.

Med det bör du ha en enkel bit av text som är ganska opåverklig på alla sätt. Skräck inte, vi gör det jawdroppingly coolt med nästa steg!

Applicera en text-skugga

För att starta 3D-ification processen, välj en färg som du gillar och tillämpa den på threedee-klassen. Applicera sedan en lite mörkare nyans av färgen som en textskugga. Jag har angett hur syntaxen fungerar med en kommentar. Observera att både den horisontella förskjutningen och suddningen är inställda på noll. Vi vill ha en hård skugga som ligger söder om vår text.

Om du behöver ett bra, snabbt sätt att hitta olika nyanser av en viss färg, kolla in 0 till 255, en superhändig gratis webbapp som jag använder hela tiden.

Efter detta steg kan du tydligt se effekterna av textskuggan. Som du kan se, skär en skugga inte riktigt. Vi närmar oss en 3D-effekt, men just nu ser det verkligen ut som en skugga. Vi måste fylla i dessa luckor.

Går 3D

För att fylla luckorna är allt vi behöver göra att lägga till lite mer textskuggor. Det kommer inte att skapa en sömlös övergång, men dina ögon är lata och de kommer att tendera att uppfatta de separata skuggorna som en enda enhet om du inte ser väldigt nära.

För att tillämpa flera skuggor, separera bara var och en med ett komma. Se till att varje är lite mer kompenserad än den sista så vi får den snygga extruderingseffekten.

Efter detta borde du ha en riktigt fin 3D-effekt som börjar ta form. Bokstäverna ser verkligen ut extruderade!

Observera att alla mina skuggor är av samma färg. Detta resulterar i en mycket platt, cartoony 3D-effekt. Om det är vad du ska göra, bra, men vi vill ha något med lite mer realism. För att uppnå detta kan vi göra varje efterföljande skugga lite mörkare.

Det är lite av en tradeoff här. Det är mycket lättare att se de enskilda skuggorna på det här sättet, men jag tenderar att tycka om att mörkareffekten är bättre än det platta utseendet.

Finputsning

Vi är fortfarande inte riktigt till det realistiska scenen. Det problem som jag ser nu är att den tredimensionella texten inte har effekt på bakgrunden. Låt oss fixa detta med några fler skuggor, den här gången med lite oskärpa och transparens.

Med det är vi alla färdiga! Det är inte så skarpt som vad vi kan uppnå med Photoshop och en timme att döda men med tanke på att det är ren CSS, det är ganska imponerande!

Problemet med den här metoden

Det största problemet som jag har med den här metoden är att det inte är mycket flexibelt. Eftersom vi använder totalt fem olika varianter av en färg, betyder det att ändra färg på 3D-texten är en verklig smärta!

Låt oss säga att jag ville ändra texten till blå. Inte bara måste jag välja min primära blå, jag måste sedan applicera var och en av skuggorna medan du gradvis förtärkar den blåa.

Visst, det är inte det svåraste i världen, men efter att ha trollat ​​runt med några färggivelser för att repetera för denna artikel kan jag definitivt säga att det är en tidskrävande uppgift. Jag hatar att allt mitt arbete inte är återanvändbart.Jag önskar att jag bara kunde tillämpa 3D-effekten, välja en enda färg och få resten bara att hända automatiskt.

Sass till räddningen

Som du säkert har anklagat för nu är det en situation där Sass-färgoperationerna skulle visa sig vara mycket användbara. Ja, jag är en riktig designer. Ja, jag föredrar att välja färgscheman manuellt. Denna process är emellertid inte raketvetenskap och känns verkligen som att den ska automatiseras. Så länge jag får välja startfärgen, har jag inget emot att Sass tar hand om resten.

Skapa Mixin

Det här är saker som kommer att bli ganska snygga, så om du inte har gjort dina läxor på Sass rekommenderar jag att du kolla in den officiella handledningen.

Vi ska pakka hela 3D-processen upp till en fin liten mixin som kan appliceras med mycket liten ansträngning. För att göra detta använder vi? @Mixin? syntax, så namnge vår mixin. Här är strukturen för startkodsblocket:

Passerar i parametrar

Eftersom vi vill att detta ska vara något som vi kan initiera på flugan, måste vi kunna skicka i en färg. För att göra detta skapar vi en variabel och placerar den inom parenteserna. Observera att Sass-variabler börjar med dollartecken.

Ställa in huvudfärgen

Nu är det dags att sätta denna mixin till jobbet. Vi vill att den ska ta färgen till den och tillämpa den på färgegenskapen. Detta görs precis som i vanlig CSS, bara vi använder vår variabel istället för att faktiskt skriva in en färgkod.

Mörk färgen

Innan vi fortsätter att skapa skuggan, måste vi lära oss hur en av Sass 'färgoperationer fungerar. Som vi såg ovan måste vår skugga bli inkrementellt mörkare vid varje implementering. Sass kan enkelt dra av det här för oss med mörkare drift.

Här startade jag den mörkare operationen, passerade i variabeln som vi satt för och gav den ett värde på 10%. Detta kommer att returnera en färg som är 10% mörkare än vad som helst $ färg är satt till.

Skapa skuggorna

Nu när vi vet hur allting fungerar, är det dags att lägga det tillsammans och bygga våra textskuggor. Här är det fullständiga mixin-fragmentet. Vi skapar mixin, passera i en variabel, ange textfärgen till den variabeln och bygga sedan våra skuggor med mörkare variationer av den variabeln.

Genomföra Mixin

Det lilla fragmentet ovan tillåter oss att skapa snygg 3D-text med vilken färg som helst med knappast något arbete. Allt vi behöver göra är att köra inkludera kommandot, ange mixinens namn och gå i en färg. Det är en vacker sak.

Hur lätt är det? Nu om vi bestämmer oss för att vi vill ha en ny färg, ändras det snabbt och smärtfritt.

Försök att ändra teckensnittet

Tänk på att detta är gjort med live, helt väljbar / redigerbar text. Det ger många fantastiska möjligheter. Försök till exempel kombinera den med en Google Web Font som Medula One för en riktigt imponerande effekt.

Live-demo
Klicka här för att se och fiska med Sass-versionen av vår threedee mixin.

Nu med mindre

Jag brukade vara en MINDRE man, men jag har blivit övervunnen av Sass djup och kraft. Men jag tror fortfarande MINDER är ett fantastiskt verktyg och vill inte avskräcka dig från att använda den på något sätt. Båda förprocessorerna har sina fördelar, så om du gillar mindre, använd det istället. De båda producerar ren CSS i slutet så hur du kommer dit är upp till dig.

Jag råkar veta från tidigare artiklar att flera av våra läsare är mindre fans så jag ville inte att någon skulle sakna den här fantastiska effekten. MINDRE delar faktiskt Sass-färgoperationerna så att vi enkelt kan bygga en liknande mixin med denna syntax. Faktum är att den mindre versionen faktiskt är mer kortfattad eftersom vi kan skrapa den @ mixin / @ inkludera syntaxen som Sass kräver.

Som du kan se är de två versionerna mycket lika. Observera att Mindre använder @ -symbolen för variabler och att mixins faktiskt speglar klasser i form, vilket är både bekvämt och lite förvirrande.

Slutsats

I slutändan håller jag med om att du inte ska vända dig till en CSS preprocessor för att göra ditt designarbete för dig. Färgpaletter bör byggas noga efter att flera viktiga faktorer har vägts. Det betyder emellertid inte att automatiska färgoperationer är värdelösa. Förhoppningsvis har jag visat ett tydligt exempel där den mörkare funktionen kombinerad med en mixin skapar ett oändligt bättre arbetsflöde för att dra av en bra 3D CSS-effekt. Jag skulle gärna höra dina tankar på andra sätt att använda färgoperationer i ett legitimt användbart arbetsflöde.

Om du vill implementera lite 3D-text i ett av dina projekt, hålla koll på Design Curate, vår fantastiska nedladdningswebbplats. Vi kommer snart att lägga in några riktigt bra resurser som bygger på denna handledning.