Kako stvoriti CSS vrpcu
Razgovaramo o tome CSS vrpce u web dizajnu kada traka kutije (zove se vrpca) obavija drugi okvir. To je prilično iskorištena tehnika dizajna ukrasite tekst, osobito naslovi. Na web-mjestu W3C-a možete provjeriti koliko ispravno koriste CSS vrpce sadržaj strukture na suptilan način.
Dakle, u ovom postu ćemo vidjeti kako stvoriti jednostavnu CSS vrpcu koje možete koristiti poboljšajte naslove na web-lokaciji. Zahvaljujući CSS transformacije, možemo stvoriti ovaj dizajn s mnogo jednostavnijom bazom koda nego prije.
Možete zaviriti u konačni demo u nastavku.
HTML i osnovni stilovi
Prvo, stvaramo označavamo oznakom .kartica selektor koji predstavlja a pravokutnik okvir vrpca će omotati oko.
Također smo postavili osnovne dimenzije i boja pozadine s CSS-om.
.kartica pozadinska boja: bež; visina: 300px; margina: 40px; širina: 500px;
Srednji dio vrpce
Koristit ćemo CSS varijabla (omogućuje nam pohranjivanje i ponovno korištenje CSS vrijednosti) --p do pohrani vrijednost dodatka. Vrijednost punjenje svojstvo koristi var (- p) sintaksu za lijevu i desnu polugu vrpce tako da može biti lako se proširio. --p varijabla kasnije će biti više puta; što čini naš kod fleksibilnim.
.vrpca --p: 15px; pozadinska boja: rgb (170,170,170); visina: 60px; padding: 0 var (- p); širina: 100%;
Na slici ispod možete vidjeti kako bi trebao izgledati vaš demo:
Centriranje vrpce
Također moramo centrirajte vrpcu. Mi gurnite je ulijevo prema veličini obloge (označeno s --p varijablu) pomoću relativnog pozicioniranja.
.vrpca --p: 15px; pozadinska boja: rgb (170,170,170); visina: 60px; padding: 0 var (- p); pozicija: relativna; desno: var (- p); širina: 100%;
Ažurirani demo:
Stranice vrpce
Sada stvaramo lijevu i desnu stranu vrpce to bi se naizgled moralo savijati oko ruba kartice. Da bismo to učinili, koristimo oba :prije i :nakon pseudoelementi od .vrpca.
Oba pseudo-elementa nasljeđuju boju pozadine .vrpca, i mi koristimo filter: svjetlina (.5) pravilo da malo potamni boju. Oni su također apsolutno pozicioniran unutar njihovog (relativno pozicioniranog) roditelja.
Njihova širina mora biti isto kao i veličina obloge, i mi ih smjestimo na lijevi i desni kraj vrpce koristiti lijevo: 0 i desno: 0 pravila stila.
.vrpca: prije, .ribbon: nakon background-color: inherit; sadržaj: "; display: block; filter: svjetlina (.5); visina: 100%; pozicija: apsolutna; širina: var (- p); .ribbon: prije lijevo: 0; .ribbon: nakon desno: 0;
Sada vrpca sa stranicama koje smo upravo dodali izgleda kao ispod:
Iskrivite strane
Izraditi strane vrpce izgleda savijena, moramo iskriviti strane za 45 °. transformiraj: iskrivljen () CSS pravilo okomiti elemente.
.vrpca: prije lijevo: 0; transformacije: skewy (45deg); .ribbon: nakon desno: 0; transformacije: skewy (-45deg);
Kao što možete vidjeti rubove stranica ne poravnavaj nakon transformacije, tako da moramo povuci ih dolje.
Poravnajte strane
Do odrediti ispravnu duljinu po kojima trebamo pomaknuti strane prema dolje, okrećemo se trigonometriji. Ono što trebamo pronaći je x, kao y je širina stranica (jednaka je veličini padding od .vrpca) i kut θ je 45 ° (kut nakošenja).
Dobivena x zatim treba prepoloviti, kao što postoje i lijeva i desna strana.
Ako koristite bilo koji CSS predprocesor, provjerite ima li preplanulost U suprotnom pogledajte tablicu tangenta ili kalkulator saznati tangentnu vrijednost kuta. Imamo sreće tan 45 ° je 1, što znači da vrijednost x jednako y u našem slučaju.
.vrpca: prije, .ribbon: nakon background-color: inherit; sadržaj: "; display: block; filter: svjetlina (.5); visina: 100%; pozicija: apsolutna; vrh: calc (var (- p) / 2); širina: var (- p);
Od x je morao biti prepolovljen, mi koristimo izračunato () CSS funkcija za obavljanje podjele --p varijabla.
Konačno moramo poravnajte strane duž z-osi također, dodajmo z-indeks: -1 vladati stranama kako bi smjestite ih iza sredine vrpce.
.vrpca: prije, .ribbon: nakon background-color: inherit; sadržaj: "; display: block; filter: svjetlina (.5); visina: 100%; pozicija: apsolutna; vrh: calc (var (- p) / 2); širina: var (- p); z- indeks: -1;
Sada kada smo poravnali strane, naša CSS vrpca je gotova.
U nastavku možete ponovno pogledati demo uživo, napominjemo da koristi i neke dodatne stilove.
