Kaip sukurti CSS juostą
Mes kalbame apie CSS juostelės žiniatinklio dizainas, kai a dėžutės juostelė (vadinama juostele) apgaubia kitą langelį. Tai gana naudojama dizaino technika papuošti tekstą, ypač antraštes. W3C svetainėje galite patikrinti, kaip tinkamai gali būti naudojamos CSS juostelės struktūros turinys subtiliai.
Taigi, šiame poste matysime kaip sukurti paprastą CSS juostą kuriuos galite naudoti patobulinti antraštes svetainėje. Ačiū CSS transformacijos, mes galime sukurti šį dizainą su daug paprastesniu kodų pagrindu nei anksčiau.
Galite žiūrėti į paskutinį demonstraciją žemiau.
HTML ir pagrindiniai stiliai
Pirma, sukuriame a žyma, kurią pažymime .kortelę selektorius, kuris yra a stačiakampio dėžutė, kurios juosta bus suvynioti aplink.
Mes taip pat nustatėme pagrindiniai matmenys ir fono spalva su CSS.
.kortelė fono spalva: smėlio spalvos; aukštis: 300px; marža: 40px; plotis: 500 px;
Vidutinė juostos dalis
Mes naudojame a CSS kintamasis (leidžia mums saugoti ir pakartotinai naudoti CSS vertę) --p į išsaugokite užpildo reikšmę. . \ T paminkštinimas nuosavybė naudoja var (- p) juostos kairiųjų ir dešiniųjų padų sintaksė, kad ji galėtų būti lengvai išplėsti. The --p kintamasis vėliau bus pakartotinai naudojami kelis kartus; kad mūsų kodas būtų lankstus.
.juosta - p: 15px; fono spalva: rgb (170,170,170); aukštis: 60px; įdėklas: 0 var (- p); plotis: 100%;
Toliau pateiktame ekrane galite matyti, kaip jūsų demo turėtų atrodyti šiuo metu:
Centruokite juostą
Taip pat turime centruokite juostą. Mes pastumkite jį į kairę pagal paminklų dydį (pažymėtas --p kintamas), naudojant santykinį padėties nustatymą.
.juosta - p: 15px; fono spalva: rgb (170,170,170); aukštis: 60px; įdėklas: 0 var (- p); pozicija: santykinis; dešinėje: var (- p); plotis: 100%;
Atnaujinta demonstracija:
Kaspino pusės
Dabar mes sukuriame kairėje ir dešinėje juostos pusėse tai turėtų, atrodo, sulenkti aplink kortelės kraštą. Norėdami tai padaryti, mes naudojame ir : anksčiau ir : po pseudo elementai .juosta.
Abi pseudo elementai paveldi fono spalvą .juosta, ir mes naudojame filtras: ryškumas (.5) taisyklė tamsinti jų spalvą šiek tiek. Jie taip pat yra visiškai išdėstyta jų (santykinai išdėstyto) tėvų.
Jų plotis turi būti toks pat kaip ir pagalvėlės dydį, ir mes juos įdėjome į kairę ir dešinę juostos galus naudojant kairėje: 0 ir dešinėje: 0 stiliaus taisyklės.
.juosta: prieš, .ribbon: po fono spalva: paveldėti; turinys: "; ekranas: blokas; filtras: ryškumas (.5); aukštis: 100%; padėtis: absoliutus; plotis: var (- p); .ribbon: prieš left: 0; .ribbon: po dešinėje: 0;
Dabar juostelė su pusėmis, kurias ką tik pridėjome, atrodo taip:
Išlenkite šonus
Padaryti juostos šonus pažvelkite, mums reikia 45 °. The transformuoti: skewy () CSS taisyklė elementus vertikaliai.
.juosta: prieš kairėje: 0; transformacija: skewy (45deg); .ribbon: po right: 0; transformacija: skewy (-45deg);
Kaip matote šonų kraštus nesuderinkite po transformacijos, todėl mums reikia ištraukite juos.
Suderinkite šonus
Į nustatyti tinkamą ilgį mums reikia perkelti šonus žemyn, kreipiamės į trigonometriją. Ką mums reikia rasti x, kaip y yra šonų plotis (lygus pakabos dydžiui) .juosta) ir kampas θ yra 45 ° (griovelio kampas).
Gauta x tada reikia perpus sumažinti, taip pat yra kairė ir dešinė pusė.
Jei naudojate bet kurį CSS išankstinio apdorojimo patikrinimą, jei jis turi a įdegis kitaip kreipkitės į tangentinę diagramą arba skaičiuoklę išsiaiškinti kampo liestinę vertę. Mes pasisekėme tan 45 ° yra 1, tai reiškia, kad x lygus y mūsų atveju.
.juosta: prieš, .ribbon: po fono spalva: paveldėti; turinys: "; ekranas: blokas; filtras: ryškumas (.5); aukštis: 100%; padėtis: absoliutus; viršus: skaičiuojamas (var (- p) / 2); plotis: var (- p);
Nuo x turėjo būti perpus, mes naudojame Calc () CSS funkcija, skirta. \ T --p kintamasis.
Galiausiai turime suderinti šonus išilgai z-ašies taip pat, todėl pridėkime z-indeksas: -1 valdyti šonus, kad įdėkite juos už juostos vidurio.
.juosta: prieš, .ribbon: po fono spalva: paveldėti; turinys: "; ekranas: blokas; filtras: ryškumas (.5); aukštis: 100%; padėtis: absoliutus; viršus: skaičiuojamas (var (- p) / 2); plotis: var (- p); z- indeksas: -1;
Dabar, kai suderinome šonus, mūsų CSS juosta yra padaryta.
Žemiau galite dar kartą peržiūrėti gyvą demonstraciją, atkreipkite dėmesį, kad jis taip pat naudoja papildomus stilius.
