Slik lager du et CSS-bånd
Vi snakker om CSS bånd i webdesign når a stripe av boks (kalt bånd) bryter inn en annen boks. Det er en ganske brukt designteknikk til dekorere tekst, spesielt overskrifter. På W3Cs nettsted kan du sjekke ut hvordan riktig brukt CSS-bånd kan hjelpe struktur innhold på en subtil måte.
Så, i dette innlegget kommer vi til å se hvordan lage et enkelt CSS-bånd som du kan bruke til forbedre overskriftene på nettstedet ditt. Takk til CSS transformasjoner, Vi kan lage denne designen med en mye enklere kodebase enn tidligere.
Du kan ta en titt på den siste demonstrasjonen nedenfor.
HTML og grunnleggende stiler
Først oppretter vi en tag vi merker med .kort velger som representerer a rektangel boksen båndet vil pakke inn rundt.
Vi satte også grunnleggende dimensjoner og bakgrunnsfarge med CSS.
.kort bakgrunnsfarger: beige; høyde: 300px; margin: 40px; bredde: 500px;
Midtdelen av båndet
Vi bruker en CSS variabel (tillater oss å lagre og gjenbruk en CSS-verdi) --p til lagre polstringsverdien. Verdien av padding eiendom bruker var (- p) syntaks for venstre og høyre paddings av båndet slik at det kan være lett utvidet. De --p variabel senere vil være gjenbrukes flere ganger; Det gjør vår kode fleksibel.
.bånd - p: 15px; bakgrunnsfarge: rgb (170,170,170); høyde: 60px; polstring: 0 var (- p); bredde: 100%;
På skjermbildet nedenfor kan du se hvordan din demo skal se ut på dette tidspunktet:
Sentering båndet
Vi må også senter båndet. Vi skyv den til venstre av polstringens størrelse (merket av --p variabel) ved hjelp av relativ posisjonering.
.bånd - p: 15px; bakgrunnsfarge: rgb (170,170,170); høyde: 60px; polstring: 0 var (- p); posisjon: relativ; høyre: var (- p); bredde: 100%;
Den oppdaterte demoen:
Sidene av båndet
Nå lager vi venstre og høyre side av båndet det burde tilsynelatende bøye seg rundt kortsiden. For å gjøre det bruker vi begge :før og :etter pseudo-elementer av .bånd.
Begge pseudoelementene arver bakgrunnsfargen til .bånd, og vi bruker filter: lysstyrke (.5) regner med å mørke fargen litt. De er også helt posisjonert innenfor deres (relativt posisjonert) foreldre.
Bredden deres må være samme som polstringsstørrelsen, og vi plasserer dem til venstre og høyre ender av båndet bruker venstre: 0 og høyre: 0 stil regler.
.bånd: før, .ribbon: etter bakgrunnsfarge: arv; innhold: "; display: blokk; filter: lysstyrke (.5); høyde: 100%; posisjon: absolutt; bredde: var (- p); .ribbon: før venstre: 0; .ribbon: etter høyre: 0;
Nå har båndet med sidene vi nettopp lagt til, se nedenfor:
Skev sidene
Å gjøre sidene av båndet se bøyd, vi må skjær sidene med 45 °. De transformere: skewy () CSS regel spretter elementer vertikalt.
.bånd: før venstre: 0; transform: skewy (45deg); .ribbon: etter høyre: 0; transform: skewy (-45deg);
Som du kan se kantene på sidene ikke juster etter transformasjonen, så må vi trekk dem ned.
Juster sidene
Til bestemme riktig lengde der vi må flytte sidene ned, vender vi oss til trigonometri. Det vi trenger å finne er x, som y er bredden på sidene (tilsvarer polstringens størrelse .bånd), og vinkelen θ er 45 ° (skjevets vinkel).
Resultatet x deretter må halveres, som det er en venstre og en høyre side også.
Hvis du bruker en CSS preprocessor, sjekk om den har en tan funksjon, ellers referer til et tangentdiagram eller en kalkulator til finn ut tangensverdien av vinkelen. Vi er heldige som tan 45 ° er 1, noe som betyr at verdien av x tilsvarer y i vårt tilfelle.
.bånd: før, .ribbon: etter bakgrunnsfarge: arv; innhold: "; display: blokk; filter: lysstyrke (.5); høyde: 100%; posisjon: absolutt; topp: calc (var (- p) / 2); bredde: var (- p);
Siden x måtte halveres, bruker vi calc () CSS-funksjon for å utføre delingen av --p variabel.
Til slutt må vi juster sidene langs z-aksen også, så la oss legge til z-indeks: -1 regjere til sidene for å kunne plasser dem bak midtdelen av båndet.
.bånd: før, .ribbon: etter bakgrunnsfarge: arv; innhold: "; display: blokk; filter: lysstyrke (.5); høyde: 100%; posisjon: absolutt; topp: calc (var (- p) / 2); bredde: var (- p); z- indeks: -1;
Nå som vi justerte sidene, er vårt CSS-bånd gjort.
Nedenfor kan du sjekke ut live demoen igjen, vær oppmerksom på at den også bruker noen ekstra styling.
