Bygg ett bibliotek med CSS Image Label-alternativ

Idag jobbar jag med en annan fantastisk gratis nedladdning för PixelsDaily. Här kan du se mina tankeprocesser, mål och kod, och senare kan du ladda ner hela projektet som ska användas i ditt eget arbete.

I grund och botten är vårt mål här att skapa en enkel effekt så att när en användare hänger över en bild dyker upp en dold textetikett i sikte. Det här är naturligtvis extremt lätt att göra så vi ska gå ett steg längre genom att bygga en hel massa alternativ för utvecklaren att välja mellan. Det här ger dig bra praxis för hur du skapar flexibla effekter som kan tillämpas på olika sätt utan för mycket kodrepetition.

Sneak Peek

Om du är angelägen om att se resultatet innan du går igenom koden, kolla in demoen nedan och sväng över varje bild för att se hur det är annorlunda.

demo: Klicka här för att starta.

Planen

Det här är vad vi vill: En enkel textikett med en svart bakgrund visas över bilden när användaren svävar. Nu, eftersom det kommer att animeras på plats, kom jag upp i totalt tio olika variationer som motsvarar ungefär samma element som används på olika sätt:

Vi har två huvudparametrar att ställa in här. Den första är där etiketten kommer att vila (topp, mitt eller botten) och den andra är var den kommer från (topp, höger, botten, vänster). Vad vi vill göra är att tillhandahålla en grundläggande repeterbar HTML-struktur för utvecklare att använda när du lägger till en bild och ge dem några klasser som kan användas för att kontrollera allt om etikettens beteende. Med detta i åtanke kan vi gå vidare till det första steget.

HTML

<p>Persistens i minnet</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-library-of-css-image-label-options_3.jpg"> <p>Vi skulle kunna hoppa över den generiska etikettklassen, men det skulle innebära att alla stilar som hör samman med varje etikett skulle behöva dupliceras i varje version av etiketten, vilket skulle göra en stor tjock röra av onödigt repetitiv kod. På så sätt kan vi tillämpa det mesta av stilen till en enda klass och spara ändringsstilarna till våra specifika klasser.</p> <p>Låt oss nu expandera det så att vi kan prova de tio olika effekterna vi syftar till i vårt slutresultat. Vi håller alla divs för denna handledning, men klasserna ska vara tillräckligt flexibla så att du även kan använda blocknivå listobjekt om du bygger ett galleri. Vi vill verkligen se till att varje bildeffekt fungerar i en individuell inställning. </p> <textarea wrap="soft" readonly=""> <p>Persistens i minnet</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-library-of-css-image-label-options_4.jpg"> <h2>Stil etiketterna</h2> <p>Nu är det dags att utforma etiketterna. Återigen är det mycket viktigt att ta reda på vilka stilar som kan återanvändas och vilka behöver variera. För att göra det gick jag helt enkelt fram och skapade ett gäng olika enskilda etiketter och tittade sedan igenom för att se var min kod var överflödig. </p> <p>Förverkligandet är att varje etikett måste ha absolut positionering (som fungerar med den relativa positioneringen från tidigare), vaddering, en uppsättning bredd, övergångar och visuell styling. Dessa egenskaper kommer att vara identiska, oavsett vilken riktning vi kommer ifrån eller vad den sista viloplatsen på etiketten kommer att vara. </p> <textarea wrap="soft" readonly=""> .label p {/ * Position * / position: absolut; vaddering: 10px; bredd: 100%; / * Hud * / bakgrund: # 000; / * fallback * / bakgrund: rgba (0,0,0,0,7); färg: #fff; typsnitt: fet kursiv 18px / 1.5 Helvtica, Verdana, sans-serif; / * Animation * / -webkit-övergång: alla 0.5 s enkelhet; -moz-övergång: alla 0.5 s enkelhet; -o-övergång: alla 0,5 s enkelhet; -ms-övergång: alla 0,5 s enkelhet; övergång: alla 0,5 s enkelhet; }

Status uppdatering

Som du kan se i bilden nedan arbetar alla våra etiketter nu och ser perfekt ut. Observera att de alla är placerade högst upp som standard, kom ihåg detta när vi flyttar framåt och skjuter dem runt.

Placera varje etikett

Härifrån har vi mycket styling att göra. Vi har verkligen en liten stil att göra, men vi måste göra det tio olika tider eftersom varje etikett är unik. För varje etikett behöver vi placera punktelementet utanför bildens gränser och sedan ta tillbaka det på svävaren.

Till att börja med vill vi ha en etikett som börjar strax ovanför en bild som kommer att flyga nedåt på svävar och vila på toppen. För att göra detta ställer vi upp värdet till -50%, vilket ändras till 0% på svävaren. På samma sätt, för samma effekt från botten börjar vi med ett bottenvärde på -50% och ändra det till 0%.

Min metod här är mycket specifik, så notera. Den svåraste delen av hela denna idé är att räkna ut hur man får det att fungera på ett brett spektrum av bildstorlekar. Vi vill inte att utvecklaren måste skriva in i en storlek varje gång, det borde bara fungera när någon slår på de obligatoriska klasserna.

Genom att använda de övre och nedre egenskaperna så är vi så, att vi inte försäkrar oss om att ingenting är bildstorleksspecifikt. Värdet på 0% på bottenegenskapen kommer att alltid tryck vår etikett ner till botten av bilden vi applicerar den till, oavsett hur långt det kan vara.

/ * TOPMÄRKET * / .top p {topp: -50%; } .top: sväng p {toppen: 0%; } / * BOTTOM LABEL * / .bottom p {botten: -50%; } .bottom: sväva p {botten: 0%; }

Därefter måste vi stilla våra etiketter som svänger in från sidorna. Vi kan svänga in från vänster till höger, höger höger, längst ner till vänster och längst ner till höger. Här är värdena för dessa. Metoden är enkel och precis som de två som vi bara gick över. Varje gång vi ställer vilopositionen precis vid ena sidan, ta sedan tillbaka den i sikte med svävaren. För dessa kommer de vänstra och högra egenskaperna till spel förutom de övre och nedre egenskaperna.

/ * BOTTOM LEFT LABEL * / .bottomleft p {botten: 0%; vänster: -150%; } .bottomleft: sväva p {vänster: 0%; } / * BOTTOM RIGHT LABEL * / .bottomright p {botten: 0%; vänster: 150%; } .bottomright: sväva p {vänster: 0%; } / * TOP LÄNSTEN ETIKET * / .topleft p {topp: 0%; vänster: -150%; } .topleft: sväva p {vänster: 0%; } / * TOP RIGHT LABEL * / .topright p {topp: 0%; vänster: 150%; } .överrätt: sväng p {vänster: 0%; }

För att slutföra måste vi koda våra centrerade etiketter. Det här är det svåraste i gänget att räkna ut. På svävar vill du placera dem femtio procent av vägen ner eller uppåt, minus hälften av etikettens höjd. Så när vi vill glida in från toppen lägger vi upp värdet till 50% och tillämpar och negativ marginal på 20px (halva höjden på våra etiketter). Tyvärr antar detta en enda textrad och den specifika typsnittstypen som vi har ställt in. Om endera ändras, blir höjden annorlunda och objektet kommer inte att centreras. Det enda jag vet om det är att använda någon sorts display: bord inrätta.

/ * CENTER FRÅN TOPP * / .centertop p {topp: -50%; } .centertop: sväva p {topp: 50%; marginal-topp: -20px; } / * CENTER FRÅN BOTTOM * / .centerbottom p {botten: -50%; } .centerbottom: sväva p {botten: 50%; marginal-botten: -20px; } / * CENTER FRÅN VÄNSTER * / .centerleft p {topp: 50%; vänster: -150%; marginal-topp: -20px; } .centerleft: sväva p {vänster: 0%; } / * CENTER FRÅN HÖGER * / .centrumrätt p {topp: 50%; vänster: 150%; marginal-topp: -20px; } .centerright: sväva p {vänster: 0%; }

Valfritt: går vidare

Om du är galen på repetition kan du gå ännu längre med att se till att din kod är så kortfattad som möjligt. Vi separerade ut varje etikett ovan för läsbarhetens skull, men resultatet är många värden som upprepas hela tiden. Vi kunde gå in och antingen kombinera selektörer manuellt eller använda Sass @extend och komma med ett mycket mer konkret resultat. Avvägningen här är naturligtvis att du upprepar dina selektörer eftersom vissa visas på flera ställen.

.top: sväva p, .topleft p, .överskridande p {topp: 0%;} .top p, .centertop p {topp: -50%;} .bottom: sväva p, .bottomleft p, .bottomright p {bottom : 0%;} .bottom p, .centerbottom p {botten: -50%;} .bottomleft: sväva p, .bottomright: sväva p, .topleft: sväva p, .överskridande: sväva p, .centerleft: sväva p, .centrumright: sväva p {vänster: 0%;} .bottomleft p, .topleft p, .centerleft p, .centerleft p {vänster: -150%;} .bottomright p, .överskridande p, .centrumrätt p {vänster: 150 %;} .centerbottom: sväva p {botten: 50%;} .centertop: sväva p, .centerleft p, .centerright p {top: 50%;} .centertop: sväva p, .centerleft p, .centerright p {margin -top: -20px;} .centerbottom: sväva p {margin-bottom: -20px;}

Se den i aktion

Vi är alla färdiga! Var noga med att kolla in live-demo nedan och svänga över varje bild för att se den olika effekten.

demo: Klicka här för att starta.

Slutsats

Detta projekt tvingade oss till mycket bra tänkande. Vi var tvungna att överväga flera gånger hur vi behåller vår kod kort och fri från repetition. Vi frågade också konsekvent vad som bäst gavs att vi vill att andra ska kunna ladda ner och ändra vår kod med mycket litet problem. Ibland när vi såg ett sätt att göra vår kod mer koncis, kom det till priset för läsbarhet och användarvänlighet, vilket inte är den bästa metoden för en gratis nedladdning.

Känn dig fri att ta tag i den här koden och använd den men du vill. Håll även koll på nedladdningen någon gång under de kommande veckorna på PixelsDaily.