Sådan oprettes et CSS-bånd
Vi taler om CSS bånd i webdesign når a strimler af kasse (kaldet bånd) indpakker en anden boks. Det er en ret brugt design teknik til dekorere tekst, især overskrifter. På W3Cs hjemmeside kan du tjekke, hvordan korrekt brugt CSS-bånd kan hjælpe strukturindhold på en subtil måde.
Så i dette indlæg vil vi se hvordan man laver et simpelt CSS-bånd som du kan bruge til forbedre overskrifterne på din hjemmeside. Tak til CSS transformationer, Vi kan skabe dette design med en meget enklere kodebase end tidligere.
Du kan tage et kig på den endelige demo nedenfor.
HTML og grundlæggende stilarter
Først opretter vi en tag vi markerer med .kort vælger der repræsenterer a rektangel boks båndet vil wrap rundt om.
Vi sætter også grundlæggende dimensioner og baggrundsfarve med CSS.
.kort baggrundsfarve: beige; højde: 300px; margin: 40px; bredde: 500px;
Midterparten af båndet
Vi bruger en CSS variabel (tillader os at gemme og genbruge en CSS-værdi) kaldet --p til gemme polstringsværdien. Værdien af polstring ejendom bruger var (- p) syntax for venstre og højre polstring af båndet, så det kan være let udvides. Det --p variabel senere vil være genbruges flere gange; Det gør vores kode fleksibel.
.bånd - p: 15px; baggrundsfarve: rgb (170.170.170); højde: 60px; polstring: 0 var (- p); bredde: 100%;
På skærmbilledet nedenfor kan du se, hvordan din demo skal se ud på dette tidspunkt:
Centrering af båndet
Vi skal også centrere båndet. Vi skub det til venstre af polstringens størrelse (markeret af --p variabel) ved hjælp af relativ positionering.
.bånd - p: 15px; baggrundsfarve: rgb (170.170.170); højde: 60px; polstring: 0 var (- p); stilling: relativ; højre: var (- p); bredde: 100%;
Den opdaterede demo:
Båndets sider
Nu skaber vi venstre og højre side af båndet det burde tilsyneladende bøje sig om kanten af kanten. For at gøre det bruger vi begge :Før og :efter pseudo-elementer af .bånd.
Begge pseudoelementer arver baggrundsfarven på .bånd, og vi bruger filter: lysstyrke (.5) regere for at mørkere deres farve en smule. De er også absolut positioneret inden for deres (relativt positioneret) forælder.
Deres bredde skal være samme som polstringens størrelse, og vi placerer dem til venstre og højre ende af båndet bruger venstre: 0 og højre: 0 stil regler.
.bånd: før, .ribbon: efter baggrundsfarve: arv; indhold: "; display: blok; filter: lysstyrke (.5); højde: 100%; position: absolut; bredde: var (- p); .ribbon: før venstre: 0; .ribbon: efter højre: 0;
Nu er båndet med siderne, som vi lige har tilføjet, vist som nedenfor:
Svæv siderne
For at gøre båndets sider ser bøjet ud, vi er nødt til skæv siderne ved 45 °. Det transformere: skewy () CSS regel skævheder elementer lodret.
.bånd: før venstre: 0; transformation: skewy (45deg); .ribbon: efter højre: 0; transformation: skewy (-45deg);
Som du kan se kanterne af siderne ikke justere efter transformationen, så skal vi træk dem ned.
Juster siderne
Til bestemme den korrekte længde hvormed vi skal flytte siderne ned, vender vi os til trigonometri. Hvad vi skal finde er x, som y er sidens bredde (svarer til polstringens størrelse .bånd) og vinklen θ er 45 ° (vinklen på skævheden).
Den resulterende x derefter skal halveres, da der også er en venstre og en højre side.
Hvis du bruger en CSS præprocessor, skal du kontrollere, om den har en tan funktion, ellers henvise til et tangentdiagram eller en regnemaskine til find ud af tangensværdien af vinklen. Vi har heldige som solbrændte 45 ° er 1, hvilket betyder at værdien af x svarer til y i vores tilfælde.
.bånd: før, .ribbon: efter baggrundsfarve: arv; indhold: "; display: blok; filter: lysstyrke (.5); højde: 100%; position: absolut; top: calc (var (- p) / 2); bredde: var (- p);
Siden x måtte halveres, bruger vi calc () CSS funktion til at udføre divisionen af --p variabel.
Endelig skal vi juster siderne langs z-aksen så godt, så lad os tilføje z-indeks: -1 regere til siderne for at kunne placere dem bag midten af båndet.
.bånd: før, .ribbon: efter baggrundsfarve: arv; indhold: "; display: blok; filter: lysstyrke (.5); højde: 100%; position: absolut; top: calc (var (- p) / 2) indeks: -1;
Nu da vi justerede siderne, er vores CSS-bånd gjort.
Nedenfor kan du tjekke live-demo igen, vær opmærksom på at det også bruger nogle ekstra stylings.
