Kako ustvariti trak CSS
Govorimo o tem Trakovi CSS v spletnem oblikovanju, ko a trak škatle (imenovan trak) zavije drugo polje. To je dokaj uporabljena tehnika oblikovanja okrasite besedilo, zlasti naslovov. Na spletni strani W3C lahko preverite, kako lahko uporabite CSS trakove vsebino strukture na subtilen način.
Torej, na tem mestu bomo videli kako ustvariti preprost trak CSS ki jih lahko uporabite okrepi naslove na vaši spletni strani. Zahvale gredo Transformacije CSS, to zasnovo lahko ustvarimo z veliko enostavnejšo kodno bazo kot prej.
Lahko si ogledate zadnjo predstavitev spodaj.
HTML in osnovni slogi
Najprej ustvarimo a oznako označimo s .kartica izbirnik, ki predstavlja a pravokotnik polje trak bo zaviti okoli.
Nastavili smo tudi osnovne dimenzije in Barva ozadja s CSS.
.kartica ozadna barva: bež; višina: 300px; marža: 40px; širina: 500px;
Srednji del traku
Uporabili bomo a Spremenljivka CSS (omogoča shranjevanje in ponovno uporabo vrednosti CSS) --str do shranite vrednost oblazinjenja. Vrednost oblazinjenje lastnost uporablja var (- p) sintaksa leve in desne obrobe traku, tako da je lahko enostavno razširiti. The --str spremenljivka bo kasneje večkratno; zaradi česar je naša koda prilagodljiva.
.trak --p: 15px; barva ozadja: rgb (170,170,170); višina: 60px; padding: 0 var (- p); širina: 100%;
Na spodnjem posnetku zaslona si lahko ogledate, kako naj bo vaša predstavitev na tej točki:
Centriranje traku
Prav tako moramo središče traku. Mi potisnite jo na levo po velikosti oblazinjenja (označeno z --str spremenljivko) z uporabo relativnega pozicioniranja.
.trak --p: 15px; barva ozadja: rgb (170,170,170); višina: 60px; padding: 0 var (- p); položaj: relativna; desno: var (- p); širina: 100%;
Posodobljeni demo:
Strani traku
Sedaj ustvarjamo levo in desno stran traku ki bi se navidezno upogibal okoli roba kartice. Za to uporabljamo oba : prej in : after psevdoelementi .trak.
Oba psevdoelementa podedujeta barvo ozadja .trak, in uporabljamo filter: svetlost (.5) pravilo, da nekoliko zamegli barvo. Prav tako so popolnoma pozicioniran znotraj njihovega (relativno pozicioniranega) starša.
Njihova širina mora biti enako kot velikost oblazinjenja, in jih postavimo na levi in desni konec traku uporabljati levo: 0 in desno: 0 pravila.
.trak: pred, .ribbon: po background-color: inherit; content: "; display: block; filter: svetlost (.5); višina: 100%; položaj: absolutna; širina: var (- p); .ribbon: pred left: 0; .ribbon: after desno: 0;
Zdaj je trak s stranmi, ki smo jih pravkar dodali, videti spodaj:
Nagnite stran
Če želite narediti stranice traku poglej, moramo obrnite stranice za 45 °. The transform: skewy () Pravilo CSS elemente navpično.
.trak: pred levo: 0; transform: skewy (45deg); .ribbon: po desno: 0; transform: skewy (-45deg);
Kot lahko vidite robove stranic ne poravnajte po preoblikovanju, zato moramo potegnite jih dol.
Poravnajte stranice
Za določite pravilno dolžino s katerimi moramo premakniti stran navzdol, obračamo se na trigonometrijo. Kar moramo najti, je x, kot y je širina stranic (enaka velikosti oblazinjenja) .trak) in kot θ je 45 ° (kot nagiba).
Rezultat x potem treba prepoloviti, kot sta leva in desna stran.
Če uporabljate predprocesor CSS, preverite, ali ima tan funkcijo, sicer se nanašajo na tangentni diagram ali kalkulator ugotovite tangentno vrednost kota. Imamo srečo tan 45 ° je 1, kar pomeni, da vrednost x enako y v našem primeru.
.trak: pred, .ribbon: po background-color: inherit; content: "; display: block; filter: svetlost (.5); višina: 100%; položaj: absolutno; vrh: calc (var (- p) / 2); širina: var (- p);
Od x je bilo treba prepoloviti, uporabimo calc () Funkcija CSS za izvedbo delitve --str spremenljivko.
Končno moramo poravnajte stranice vzdolž osi z tudi, zato dodajmo z-indeks: -1 pravilo ob strani, da bi postavite jih za srednji del traku.
.trak: pred, .ribbon: po background-color: inherit; content: "; display: block; filter: svetlost (.5); višina: 100%; položaj: absolutno; vrh: calc (var (- p) / 2); širina: var (- p); z- indeks: -1;
Zdaj, ko smo poravnali stranice, je naš CSS trak končan.
Spodaj si lahko znova ogledate predstavitev v živo. Upoštevajte, da uporablja tudi nekatere dodatne stylings.
