Idag ska vi se om vi kan ta en enda bild in via HTML och få den att se ut som en rörig stapel bilder med bara CSS. Nyckeln: pseudoelement.
Längs vägen ser vi hur inleder ett projekt som detta snabbt kan leda till en viss rörig kod och hur vi kan bekämpa det med några fantastiska DRY-kodningspraxis.
Utmaningen
Jag kollade på det fantastiska innehållet på vår nya nedladdningswebbplats, Pixels Daily, och jag hittade en bra liten, gratis PSD-skiva som heter Stacks, som hjälper dig att snabbt och enkelt bygga en stapel Polaroid-esque-bilder i Photoshop.
Som du kan se är det en ganska attraktiv effekt. Så snart jag såg det, ville jag omedelbart försöka dra av den med CSS. Det är en knepig situation men för att det finns flera lager staplade ovanpå varandra och vi vill inte röra upp vår markering med tre bilder för varje gallerityp. Så hur kan vi utföra denna illusion samtidigt som vi minimerar vår HTML-markup?
Det visar sig att jag letade efter lögner i pseudo-element. Detta är ett perfekt användningsfall för att visa magiken av: före och: efter. Låt oss börja.
HTML
För att skapa vår första stapel är den enda HTML vi behöver en div med en bild inuti den. Det är allt! Resten av det fina fotverket kommer alla att utföras via CSS. Se till att du lägger till? Stackon? klass till div.
Här har vi riktat in den klass som innehåller vår toppbild, sedan implementerat: före pseudoelementet utan innehåll. Detta lägger effektivt till ett annat objekt i dokumentflödet för att vi ska arbeta med. Låt oss nu stila som om vi gjorde vår tidigare bild:
Det viktigaste att märka här är att vi inte verkligen arbetar med en bild. Jag kunde ladda i en annan bild, men det skulle vara en dålig idé med tanke på att vi gör stackar av tre. För varje bild i galleriet vill vi inte ladda in tre! Lyckligtvis, eftersom det mesta av ytan på pseudoelementen kommer att döljas, kan vi helt enkelt använda en solid färg och fortfarande dra av den effekt vi letar efter.
positionering
Vid den här tiden ser sakerna inte så bra ut. Vi har faktiskt förstört vår bild!
Som du kan se, stör vårt pseudoelement med bilden. För att åtgärda detta måste vi lägga till en positioneringskontext och sedan trycka den på baksidan med z-index. Jag har delat upp de olika bitarna av stilar här så att du tydligt kan se vad som händer med varje block.
Genom att använda absolut positionering kan vi sedan trycka vår bild på plats med utgångspunkten för originalbilden. Som vi sa, skjuter z-index då bilden till bakgrunden, vilket hjälper till med störningarna som vi fick tidigare. Slutligen kastade vi på en omvandlingseffekt för att dra av den rotiga rotationen som du ser i den ursprungliga stapeln PSD.
Avstämning
Vid den här tiden ser allt bra ut! Vårt andra foto (väl, falskt foto) sitter fint under vårt första och har tillräckligt med rotation för att skilja den från varandra. En mer och vi är gratis hemma.
Det andra pseudoelementet
Som du antagligen kan gissa, för att lägga till ett tredje foto i stapeln, behöver vi använda: efter pseudoelementet. Det fungerar precis som det vi just gjorde, så det behöver inte gå igenom det i detalj. De primära skillnaderna kommer att vara en annan bakgrundsfärg, position och rotation.
Avstämning
Skulle du titta på det? Vi har avslutat vår första bildstapel! Det är en ganska snygg effekt med tanke på att den bara använder en enda bild.
Ett felaktigt arbetsflöde
Med tanke på att den ursprungliga PSD hade flera olika bildstaplar att välja mellan, ville jag göra samma sak med CSS-klasser. För att göra detta kan vi enkelt kopiera och klistra in hela koden ovan till en ny? Stacktwo? klass och ändra rotationen / positioneringen för pseudoelementen. Bam: du har själv en ny stack.
Det här är dock problemet: Jag gjorde det med en hel del åtta olika staplar och resultatet var en fasansfull blob av kod.Det var allvarligt felaktigt än en tabellbaserad layout 1997. Problemet är naturligtvis att jag upprepar mig själv om och om igen. Mer än hälften av min kod består av ren redundans. Jag kan inte med gott medvetande överlämna sådana grymma metoder till dig.
DRY CSS
Andy Hunt och Dave Thomas myntade termen? DRY? i förhållande till programmering, vilket står för? Repetera inte dig själv? För att göra en inans semantisk punkt är CSS inte tekniskt ett programmeringsspråk, det är ett stilarksspråk. Men om vi behandlar det som ett programmeringsspråk och tillämpar begreppen DRY-kodning, hamnar vi med ett mycket bättre resultat.
Låt oss se om vi kan tillämpa dessa metoder för att göra vår kod lite kortare och mer utökningsbar.
Låt oss försöka igen
Om vi skapar en massa klasser och följer vår nuvarande sökväg, kommer vår CSS att bli otrevlig. Strax utanför flaggan måste vi förklara varje klass individuellt och sedan skicka in en stor bit av kod till var och en. Och detta är innan vi närmar oss pseudoelementen, som bokstavligen kommer att tredubblera vår kod!
Med tanke på att en hel del stilar kommer att delas, låt oss skära tillbaka på vår kod och placera några av dessa stilar i ett enda block.
Detta tar våra kärnstilar och tillämpar dem på alla startklasser på en gång, vilket är mycket bättre än att upprepa oss om och om igen. Som ett valfritt nästa steg kan du bli ännu snällare med dina selektörer.
Lägg märke till hur alla våra klasser börjar med samma fem bokstäver:? Stack ?. Med tanke på denna information kan vi dra ut godtycklig substring attributvärdesväljare och rikta in alla klasser som börjar med den här strängen med fem bokstäver.
Hur snygging är det? Den här väljaren riktar sig till alla dessa klasser för oss! Ännu bättre, om vi väljer att lägga till åtta fler stackklasser till mixen, kommer denna väljare fortfarande att fungera perfekt.
Låt oss ta det här ytterst och se hur kort vi kan göra vår kod. Nyckeln här är att hitta allt som upprepas och istället försöka använda det bara en gång. Som du kan se började jag med deklarationerna som bara kan tillämpas på? Stacken? klasser. Sedan flyttade jag på stilar som kunde tillämpas på stackklasserna tillsammans med: före och: efter element. Narrowing ner det igen jag satte upp ett deklarationsblock för endast: före och: efter stilar. Slutligen slutade jag med olika färger som vi använder för: före klasserna.
Vad vi gjort här tas bokstavligen hundratals linjer med kod och komprimerade dem till ett litet utrymme. Detta är fantastiskt för underhåll, lastningstider och din allmänna sanity! Det är lite knepigt att förstärka ditt sinne kring DRY-principerna först, men när du aldrig ser du aldrig tillbaka.
Andra staplar
Härifrån kommer varje stapel att vara ganska unik så vi måste koda resten en åt gången. En liten Sass eller Mindre skulle gå en lång vägen mot att hjälpa till med den här delen, men ni är sjuka av mig ranting om förädlingarnas förundran så jag gjorde det långt.
Webbläsarkompatibilitet
I min testning var webbläsarkompatibiliteten här ganska imponerande.Allt ska fungera bra i Safari, Firefox, Chrome, Opera och IE9 +. För IE7 får du ett enkelt bildgalleri utan fancy stack-effekten, som jag anser vara helt acceptabel eftersom det här är en rent estetisk touch som avrundade hörn.
IE8 är den knepiga eftersom den delvis stöder tillräckligt med saker för att verkligen skruva upp allt. Du kan bestämma hur du närmar dig den här frågan men du vill, men lösningen jag kom fram var att använda en hemsk, smutsig hack för att bara rikta IE8, vilket är att lägga till \ 9 till alla IE8-format. Med hjälp av denna teknik gömde jag helt enkelt: före och: efter element så att IE8 får ett enkelt bildgalleri som IE7.
De snygga selektorerna är där IE8 tenderar att bli uppstoppad, det stöder faktiskt före och efter så länge du håller dig vid singel-kolonsyntaxen. Om du listar ut klasserna med kommatecken istället för att använda attributvärdesväljaren, ska du kunna få IE8 att utföra stack-effekten.
Slutsats
Vi packade mycket idag. Vi byggde en cool bildstackelusion, lärde oss hur vi implementerade: före och efter, och diskuterade sedan bästa metoder för kodning under användning av en DRY-mentalitet. Jag hoppas du lärde dig något och hade lika kul som jag gjorde!
Håll koll på PixelsDaily i dagarna framåt för en fantastisk gratis nedladdning som innehåller all källkod för denna handledning tillsammans med åtta fantastiska bildstaplar som du kan använda i dina projekt.