Kuidas luua CSS-lint
Me räägime CSS-lindid veebidisainis, kui a kasti riba (nn lint) mähib teise kasti. See on üsna kasutatud disainitehnika kaunistage teksti, eriti rubriigid. W3C veebisaidil saate vaadata, kuidas CSS-lindid õigesti kasutada saavad struktuuri sisu peenel viisil.
Niisiis, selles postituses näeme kuidas luua lihtne CSS-lint mida saate kasutada parandada rubriike veebisaidil. Tänu CSS-i teisendused, saame selle disaini luua palju lihtsama koodialusega kui varem.
Allpool on võimalik tutvuda viimase demoga.
HTML-i ja põhilised stiilid
Esiteks loome a silt, millega me tähistame .kaardile valijat, mis tähistab a ristkülikukast mähkima ümber.
Me seadsime ka põhilised mõõtmed ja taustavärv CSS-iga.
.kaart taustavärv: beež; kõrgus: 300 px; varu: 40px; laius: 500 px;
Lindi keskosa
Me kasutame a CSS muutuja (võimaldab meil salvestada ja uuesti kasutada CSS-väärtust) --lk kuni salvestage polsterdusväärtus. Väärtuse polsterdus vara kasutab var (- p) lindi vasak- ja parempoolsete sündmuste süntaks, et see oleks võimalik kergesti laiendatav. The --lk muutuja saab hiljem olema korduvalt kasutada; see muudab meie koodi paindlikuks.
.lint - p: 15px; taustavärv: rgb (170,170,170); kõrgus: 60 px; polsterdus: 0 var (- p); laius: 100%;
Alloleval pildil saate näha, kuidas teie demo peaks sellel hetkel nägema:
Lindi tsentreerimine
Me peame ka keskele lint. Me suruge see polsterdusmõõdus vasakule (tähistatud tähega --lk muutuja) suhtelise positsioneerimise abil.
.lint - p: 15px; taustavärv: rgb (170,170,170); kõrgus: 60 px; polsterdus: 0 var (- p); positsioon: suhteline; paremale: var (- p); laius: 100%;
Uuendatud demo:
Lindi küljed
Nüüd loome lindi vasakule ja paremale küljele see peaks näiliselt kaarduma serva ümber. Selleks kasutame mõlemat : enne ja : pärast pseudo-elemendid .Pael.
Mõlemad pseudoelemendid pärivad taustavärvi .Pael, ja me kasutame seda filter: heledus (.5) reeglina tumedamaks oma värvi veidi. Nad on ka absoluutselt paigutatud oma (suhteliselt paigutatud) vanemaga.
Nende laius peab olema sama, mis padding suurus, ja me paneme need lindi vasakule ja paremale otsale kasutades vasakule: 0 ja paremale: 0 stiili reeglid.
.lint: enne, .ribbon: pärast taustavärv: pärita; sisu: "; kuva: plokk; filter: heledus (.5); kõrgus: 100%; positsioon: absoluutne; laius: var (- p); .ribbon: enne vasakul: 0; .ribbon: pärast paremale: 0;
Nüüd näeb lint, mille pooled just oleme lisanud, välja nagu allpool:
Kallutage külgi
Lindi külgede valmistamiseks näed painutatud, me peame kallutage külgi 45 ° võrra. The teisendama: skewy () CSS reegel kallutab elemendid vertikaalselt.
.lint: enne vasakul: 0; transform: skewy (45deg); .ribbon: pärast right: 0; transform: skewy (-45deg);
Nagu näete külgede servi ei joondu pärast ümberkujundamist, nii et me peame tõmmake need alla.
Joondage küljed
Et määrata õige pikkus mille abil peame küljed allapoole liikuma, pöördume trigonomeetria poole. Me peame leidma x, nagu y on külgede laius (võrdub. \ t .Pael) ja nurk θ on 45 ° (viltuse nurk).
Tulemuseks on x siis tuleb vähendada poole võrra, nagu on ka vasak ja parem pool.
Kui kasutate mis tahes CSS-i eeltöötluse kontrolli, kas sellel on a tan muul juhul viidake puutuja diagrammile või kalkulaatorile leidke nurga puutuja väärtus. Me oleme õnnelikud tan 45 ° on 1, mis tähendab, et x võrdub y meie puhul.
.lint: enne, .ribbon: pärast taustavärv: pärita; sisu: "; kuva: plokk; filter: heledus (.5); kõrgus: 100%; positsioon: absoluutne; ülemine: arvutatud (var (- p) / 2); laius: var (- p);
Alates sellest ajast x peame poole võrra vähendama, me kasutame Calc () CSS funktsioon, mis võimaldab --lk muutuja.
Lõpuks peame joondage küljed piki z-telge samuti, seega lisame z-indeks: -1 reeglit külgedele, et asetage need lindi keskosa vahele.
.lint: enne, .ribbon: pärast taustavärv: pärita; sisu: "; kuva: plokk; filter: heledus (.5); kõrgus: 100%; positsioon: absoluutne; ülemine: arvutatud (var (- p) / 2); laius: var (- p); z- indeks: -1;
Nüüd, kui me pooled joondasime, on meie CSS lint tehtud.
Allpool saate uuesti vaadata otseülekannet, pange tähele, et ta kasutab ka mõningaid täiendavaid kujundeid.
