Hvordan lage et CSS-bånd

Vi stiller også de grunnleggende dimensjonene og bakgrunnsfargen med CSS.

 .kort {bakgrunnsfarger: beige; høyde: 300px; margin: 40px; bredde: 500px; } 

Midtdelen av båndet

Vi bruker en CSS-variabel (lar oss lagre og gjenbruk en CSS-verdi) som kalles --p å lagre polstringsverdien . Verdien av padding bruker var(--p) syntaks for venstre og høyre polstring av båndet slik at det lett kan utvides . --p variabelen senere vil bli gjenbrukt flere ganger ; Det gjør vår kode fleksibel.

 .ribbon {--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:

Vi må også sentrere båndet . Vi skyver den til venstre av polstringsstørrelsen (merket av - --p variabelen) ved hjelp av relativ posisjonering.

 .ribbon {--p: 15px; bakgrunnsfarge: rgb (170, 170, 170); høyde: 60px; polstring: 0 var (- p); stilling: relativ; høyre: var (- p); bredde: 100%; } 

Den oppdaterte demoen:

Nå lager vi venstre og høyre side av båndet som burde tilsynelatende bøye seg rundt kortsiden. For å gjøre det bruker vi både :before og :after pseudo-elementer av .ribbon .

Begge pseudoelementene arver bakgrunnsfargen til .ribbon, og vi bruker filter: brightness(.5) regel for å mørke fargene litt. De er også helt posisjonert innenfor deres (relativt posisjonert) forelder.

Bredden deres må være den samme som polstringsstørrelsen, og vi legger dem til venstre og høyre ende av båndet med left: 0 og right: 0 stilregler.

 .ribbon: før, .ribbon: etter {bakgrunnsfarge: arve; innhold:''; skjerm: blokk; filter: lysstyrke (.5); høyde: 100%; posisjon: absolutt; bredde: var (- p); } .ribbon: før {left: 0; } .ribbon: etter {høyre: 0; } 

Nå båndet med sidene vi nettopp har lagt til ser som nedenfor:

For å gjøre båndets sider ser bøyd ut, må vi skjære sidene ved 45 ° . transform: skewy() CSS-regelen skiller elementer vertikalt .

 .ribbon: før {left: 0; transform: skewy (45deg); } .ribbon: etter {høyre: 0; transform: skewy (-45deg); } 

Som du kan se kantene på sidene ikke justere etter transformasjonen, så må vi trekke dem ned .

For å bestemme riktig lengde som vi trenger å flytte sidene ned, vender vi oss til trigonometri. Det vi trenger å finne er x, da y er .ribbon bredde (tilsvarer polstringens polstring), og vinkelen θ er 45 ° (skråningsvinkelen).

Den resulterende x må deretter halveres, da det er en venstre og en høyre side også.

 .ribbon: før, .ribbon: etter {bakgrunnsfarge: arve; innhold:''; skjerm: 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-funksjonen til å utføre delingen av --p variabelen.

 .ribbon: før, .ribbon: etter {bakgrunnsfarge: arve; innhold:''; skjerm: 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.

Disse internetthandlingene vil gjenopprette din tro i menneskeheten

Når liv endrer seg og vi lever bak skjermene til bærbare datamaskiner, tabletter og smarttelefoner, begynner vi å miste en følelse av vår menneskehet og det som i hovedsak gjør oss medfølende skapninger . Heldig for oss, alt er ikke tapt, og det er mange historier om goodwill spredt over Internett. Jo, d

(Tekniske og design tips)

12 Apps for lengre batterilevetid [Android]

Det er mange forskjellige smarttelefoner på markedet i disse dager, og de kommer lastet med alle mulige funksjoner. Fra en elegant og vakker design til et kamera av god kvalitet for den berømte, ærverdige selfie, er alle disse funksjonene viktige når du vurderer en ny telefon. Men kanskje det viktigste ved alle er en lang batterilevetid . Ny

(Tekniske og design tips)