Det har varit ett tag sedan vi polerade våra HTML- och CSS-färdigheter med en rolig liten demo, låt oss avsluta det här steget med ett projekt som är både super attraktivt och super praktiskt.
Idag ska vi bygga en kortstil? Hyr mig? widget som du snabbt kan släppa på en webbsida. Längs vägen lär vi oss en massa bra saker om CSS-positionering och hur man använder pseudoelement för att dra av några snygga effekter.
Vad vi bygger
Jag besökte nyligen det fantastiska gratis PSD-biblioteket på vår systersida PixelsDaily och kom över den här pärlan från designer Marc Gonzales.
Jag älskar både idén här och genomförandet. Varje portfölj borde ha ett tydligt sätt att anställa designern och det här är ett enkelt och attraktivt sätt att integrera den funktionen.
Marc har gjort ett fantastiskt jobb här, men filen som han tillhandahåller är en skiktad PSD. Idag kommer vi att använda detta som inspiration till vår egen liknande widget byggd helt av CSS och HTML. Vi ändrar ett par saker längs vägen och tar några friheter, men i slutändan kommer det sista stycket att vara mycket lik det vi ser här.
Steg 1. HTML-inställning
Det första som vi ska göra är att skapa lite grundläggande HTML som ska fungera som strukturen för vårt märke. Vi använder en två div-struktur: den yttre div kommer att hålla kortet som helhet och den inre diven kommer att vara ett trevligt och enkelt sätt att gruppera alla våra textobjekt tillsammans.
I den yttre diven, kasta i en bild som ska fungera som din avatar. I den inre diven, inkludera en h3 med ditt namn, en paragraf med din jobbtitel och en ankare med orden "Hire Me.?" Din kod ska se ut som följande.
Som du kan se gav vi den en höjd och en bredd, satt bakgrundsfärgen och applicerade en kantradie för att runda av hörnen. Observera den relativa positionering som används här, det kommer att bli relevant senare, jag planerar bara framåt.
Utöver avrundade hörn har den ursprungliga kortdesignen ett par fler funktioner som kommer att ta lite heftig CSS3-kod för att uppnå. Först bort är boxskugga, vilket är tillräckligt enkelt och kräver endast ett alternativt webbläsarprefix vid denna tidpunkt. Att lägga till en gradient är dock fortfarande en stor röra. Jag hatar kodningsgradienter för hand så jag använder den här generatorn för att skapa kod för den linjära gradienten som vi behöver.
Här är den resulterande koden (jag har också lagt till en kroppsfärg):
Steg 2 Progress Check
Efter att du har lagt till den här koden kan vi tydligt se den färdiga kortformen. Problemet är nu att vårt innehåll störs utanför kortets gränser, vi tar itu med det här snart.
Steg 3. Stil Avatar
Innan vi dyker in på att fixa det fula textproblemet, låt oss få vår avatar utformad och tryckt på plats.
Allt vi har gjort här är att knyta bilden med marginaler, se till att vi får rätt storlek oavsett vilken bild du använder och lägger till en ramradius. Observera att detta inte längre kräver webbläsarprefix. Hurra!
Steg 3 Progress Check
Långsamt men säkert gör vi framsteg. Nu är vår avatar på plats med den stil som vi vill ha. Därefter tacklar vi texten!
Steg 4. Stil texten
Det sätt på vilket texten för närvarande strömmar är inte bra. Vi behöver ta bort den till höger om avataren istället för under den. Vi skulle kunna flyta den, men jag tror att den absoluta positioneringen kommer att ge oss mer frihet och flexibilitet att driva det exakt var vi vill ha det.
Som du kan se, efter att ha tillämpat absolut positionering, nuddade jag den ner och lämnade, sedan centrerade alla texten. Det här är vår relativa positionering som vi tillämpade tidigare kommer till spel. Med hjälp av denna teknik kommer den absolut positionerade inre diven att överväga nollpunkten för att vara den relativt positionerade yttre div istället för kanfas övre vänstra punkt.
Stil rubriken och stycket
Nu när vi har skrivit texten på plats, låt oss utforma den. Vi börjar med att fokusera på rubriken och stycket.Allt vi verkligen behöver är att använda lite typsnitt och en färg för varje.
Med den lilla koden ser vi redan mycket bättre ut. Vi behöver bara stila som länkar till en knapp och vi är redo att dyka in i pseudoelementen.
Stil länken
Det mesta av texten är lätt att stila, men för länken behöver vi en mycket större bit av kod. Detta beror på att den ursprungliga designen kräver en länk som är stylad för att se ut som en knapp. För att göra detta måste vi lägga till en del polstring, kantradie och skuggor.
Det finns några viktiga saker att notera här. Först avlägsnade jag standard länk styling genom att ta bort text dekoration och ställa in en ny färg. Dessutom lade jag till den minsta av gränserna runt knappkanten för att hjälpa det att stå ut lite. Slutligen har jag lagt två skuggor om detta element. Den första är en insetskugga som verkligen är mer av en inre glöd och den andra är en mer typisk dropshadow.
Steg 4 Progress Check
Med det har vi en fin liten? Lej mig? kort. Tekniskt kan du stanna här, men jag ska trycka på och skapa den lilla staplade korteffekten från den ursprungliga designen.
Steg 5. Stapla på däcken
I Marcs ursprungliga design ser vi att han skapat illusionen av en bunke kort istället för att bara visa ett enda kort som flyter i rymden. Det finns ett antal sätt att vi kan uppnå detta med kod, men i sista hand bör vi komma ihåg att det vore bättre att inte röra upp vår HTML-markering med tomma divs, en ren CSS-lösning skulle vara mycket att föredra.
Med tanke på denna information kan vi vända oss till?: Innan? och efter? pseudoelement för lösningen, som vi förklarar i imponerande djup i vårt inlägg, The Lowdown på: Före och: Efter i CSS.
Vi börjar med: efter pseudoelementet. För att genomföra det, rikta in mot? klass och använd singel-kolonsyntaxen (IE gillar inte dubbelt kolonsyntaxen). Ställ in innehållet i tomt, läget är absolut, gränsen till 10px (samma som originalkortet) och skjut det åt vänster med 4px (högsta värdet ska vara 0). Jag avslutade detta genom att ställa in z-indexet till -1 för att vara säker på att det visas under det ursprungliga kortet.
I grund och botten är det vi syftar till här att bygga upp det ursprungliga kortet. Vi vill ha samma dimensioner, samma skuggor, samma gradient etc. Den ena stora skillnaden är att vi lägger till i en rotation för att kompensera detta kort från originalet.
Nu upprepar vi samma process med?: Innan? pseudoelement så att vi hamnar ihop med en stapel med tre kort. Detta går runt, z-indexet är inställt på -2 och rotationen har fördubblats.
Rengör den här uppenbaringen!
Det är väldigt viktigt att alltid fråga din kod och undersöka hur du kan göra det bättre. När jag tittar på stilar för de tre olika korten ser jag en ton av upprepning. Detta är en direkt kränkning av DRY (Do not Repeat Yourself) principen om kodning, vilket hjälper din CSS att hålla sig ren och effektiv.
Samma exakta höjd-, bredd-, gränsvärden, skugg- och gradientvärden upprepas inte mindre än tre gånger i vår kod. Detta är helt meningslöst och slarvigt. Det är okej att koda så här som du är? Sketching? och leker för att få saker rätt, men när du är klar ska du alltid städa upp.
Vi kan åstadkomma detta genom att ta alla dessa upprepade värden och gruppera dem i ett enda deklarationsblock som riktar sig mot alla tre väljare. Efter det kan vi dramatiskt minska koden som behövs för varje enskilt kort.
Kolla in demoen
Goda nyheter, vi är alla färdiga! Vi har nu en fantastisk liten? Hyra mig? märke som enkelt kan släppas på en webbsida. Jag har inbäddat CodePen-demoen nedan, så du borde kunna titta på både koden och slutresultatet. Om det inte fungerar för dig, kolla här.
Vad tror du?
Jag hoppas att du har haft det här lilla projektet så mycket som jag har. Vi lärde oss en hel del om allt från att stapla objekt med z-index för att organisera vår kod med DRY-koncept. Lämna en kommentar nedan och låt mig veta vad du tycker.
Om du har några förslag till förbättringar eller ändringar, se till att gaffla min CodePen-demo och lämna en länk till din version nedan.