Så här skapar du ett CSS-band
Vi pratar om CSS-band i webbdesign när a ruta av låda (kallat band) omsluter en annan låda. Det är en ganska använd designteknik för dekorera text, speciellt rubriker. På W3Cs hemsida kan du kolla hur korrekt använd CSS-band kan hjälpa till strukturinnehåll på ett subtilt sätt.
Så, i det här inlägget kommer vi att se hur man skapar ett enkelt CSS-band som du kan använda till förbättra rubrikerna på din hemsida. Tack vare CSS-omvandlingar, Vi kan skapa denna design med en mycket enklare kodbas än tidigare.
Du kan ta en titt på den slutliga demo nedan.
HTML och grundläggande stilar
Först skapar vi en tag vi markerar med .kort väljare som representerar a rektangel låda bandet kommer slå in runt.
Vi ställer också in grundläggande dimensioner och den bakgrundsfärg med CSS.
.kort bakgrundsfärg: beige; höjd: 300px; marginal: 40px; bredd: 500px;
Mitten av bandet
Vi använder en CSS-variabeln (tillåter oss att lagra och återanvända ett CSS-värde) kallat --p till lagra vadderingsvärdet. Värdet av stoppning egendom använder var (- p) syntax för vänster och höger paddling i bandet så att det kan vara lätt utvidgas. De --p variabel senare kommer att vara återanvändas flera gånger; Det gör vår kod flexibel.
.band --p: 15px; bakgrundsfärg: rgb (170,170,170); höjd: 60px; vaddering: 0 var (- p); bredd: 100%;
På skärmdumpen nedan kan du se hur din demo ska se ut vid denna tidpunkt:
Centrerar bandet
Vi behöver också centrera bandet. Vi skjut det till vänster av vadderingsstorleken (markerad av --p variabel) med relativ positionering.
.band --p: 15px; bakgrundsfärg: rgb (170,170,170); höjd: 60px; vaddering: 0 var (- p); position: relativ; höger: var (- p); bredd: 100%;
Den uppdaterade demo:
Bandets sidor
Nu skapar vi vänster och höger sida av bandet Det borde tydligen böja sig runt kortsidan. För att göra så använder vi båda :innan och :efter pseudo-element av .band.
Båda pseudoelementen ärver bakgrundsfärgen på .band, och vi använder filter: ljusstyrka (.5) regera för att mörka sin färg lite. De är också absolut positionerad inom sin (relativt positionerade) förälder.
Deras bredd måste vara samma som vadderingsstorleken, och vi placerar dem till vänster och höger änden av bandet använda vänster: 0 och höger: 0 stil regler.
.band: före, .ribbon: efter bakgrundsfärg: ärv; innehåll: "; display: block; filter: ljusstyrka (.5); höjd: 100%; position: absolut; bredd: var (- p); .ribbon: före vänster: 0;. höger: 0;
Nu har bandet med sidorna vi just lagt till se nedan:
Skaka sidorna
Att göra sidorna av bandet ser böjd ut, vi måste skjut sidorna med 45 °. De transformera: skewy () CSS-regeln snedställer elementen vertikalt.
.band: före vänster: 0; transform: skewY (45deg); .ribbon: efter höger: 0; transform: skewY (-45deg);
Som du kan se kanterna på sidorna justera inte efter omvandlingen, så behöver vi det dra ner dem.
Justera sidorna
Till bestäm rätt längd där vi behöver flytta sidorna nere, vänder vi oss till trigonometri. Vad vi behöver hitta är x, som y är sidans bredd (motsvarar vadderingsstorleken på .band) och vinkeln θ är 45 ° (skevets vinkel).
Det resulterande x sedan måste halveras, som det finns en vänster och en höger sida också.
Om du använder någon CSS preprocessor kontrollera om den har en solbränna funktion, annars hänvisar du till ett tangentbord eller en kalkylator till ta reda på tangentens tangentvärde. Vi har tur som solbränna 45 ° är 1, vilket betyder att värdet av x är lika med y i vårat fall.
.band: före, .ribbon: efter bakgrundsfärg: ärv; innehåll: "; display: block; filter: ljusstyrka (.5); höjd: 100%; position: absolut; topp: calc (var (- p) / 2); bredd: var (- p);
Eftersom x måste halveras, vi använder calc () CSS-funktion för att utföra delningen av --p variabel.
Slutligen måste vi rikta sidorna längs z-axeln också, så låt oss lägga till z-index: -1 regel till sidorna för att placera dem bakom mittpartiet av bandet.
.band: före, .ribbon: efter bakgrundsfärg: ärv; innehåll: "; display: block; filter: ljusstyrka (.5); höjd: 100%; position: absolut; topp: calc (var (- p) / 2); bredd: var index: -1;
Nu när vi justerade sidorna är vårt CSS-band gjort.
Nedan kan du kolla in live-demo igen, var snäll och observera att det även använder några ytterligare stylingar.
