Cum se creează o panglică CSS
Noi vorbim despre Panglici CSS în designul web atunci când a banda de cutie (numită panglică) împachetează o altă cutie. Este o tehnică de proiectare destul de folosită decorați textul, în special titluri. Pe site-ul Web W3C puteți verifica modul în care panglicile CSS utilizate în mod corespunzător vă pot ajuta structura conținutului într-un mod subtil.
Deci, în acest post vom vedea cum se creează o panglică simplă CSS pe care le puteți folosi îmbunătățiți rubricile pe site-ul dvs. Mulțumită Transformări CSS, putem crea acest design cu o bază de cod mult mai simplă decât înainte.
Puteți să aruncați o privire la demonstrația finală de mai jos.
HTML și stiluri de bază
Mai întâi, creăm un eticheta pe care o marcăm cu .card selector care reprezintă a dreptunghi box va panglica împacheta în jurul.
De asemenea, setăm dimensiuni de bază si culoare de fundal cu CSS.
.carte background-color: bej; înălțime: 300px; margine: 40px; lățime: 500px;
Partea din mijloc a panglicii
Vom folosi a Variabila CSS (ne permite să stocăm și să reutilizăm o valoare CSS) numită --p la păstrați valoarea de umplutură. Valoarea lui umplutură proprietatea utilizează var (- p) sintaxa pentru padele de stânga și dreapta ale panglicii, astfel încât să poată fi ușor de lărgit. --p variabilă mai târziu va fi reutilizate de mai multe ori; care face codul nostru flexibil.
.panglică - p: 15px; fundal-culoare: rgb (170,170,170); înălțime: 60px; umplutură: 0 var (- p); lățime: 100%;
Pe captura de ecran de mai jos puteți vedea cum ar trebui să arate demo-ul dvs. în acest moment:
Centrarea panglicii
Avem de asemenea nevoie centrați panglica. Noi împingeți-l spre stânga cu mărimea căptușelii (marcate de --p variabilă) utilizând poziționarea relativă.
.panglică - p: 15px; fundal-culoare: rgb (170,170,170); înălțime: 60px; umplutură: 0 var (- p); poziția: relativă; dreapta: var (- p); lățime: 100%;
Demo actualizat:
Latura panglicii
Acum creăm stânga și dreapta părții laterale a panglicii care ar trebui să se aplece aparent în jurul marginea cărții. Pentru a face acest lucru, folosim ambele :inainte de și :după pseudo-elementele din .panglică.
Ambele pseudo-elemente moștenesc culoarea de fundal a .panglică, și folosim filtru: luminozitate (.5) să-și închidă puțin culoarea. Sunt și ele absolut pozitionata în cadrul părintelui lor relativ poziționat.
Lățimea lor trebuie să fie la fel ca mărimea căptușelii, și le punem la capătul stâng și la dreapta al panglicii folosind stânga: 0 și dreapta: 0 reguli de stil.
.panglică: înainte, .ribbon: după background-color: moștenire; (<0: 0 .ribbon: după dreapta: 0;
Panglica cu laturile pe care tocmai le-am adăugat arată mai jos:
Strângeți laturile
Pentru a face laturile panglicii arata bine, avem nevoie să înclinați laturile cu 45 °. transform: skewy () Regula CSS elementele verticale.
.panglică: înainte de stânga: 0; transformare: skewy (45deg); .ribbon: după dreapta: 0; transformare: skewy (-45deg);
După cum puteți vedea marginile laturilor nu aliniați după transformare, așa că trebuie trageți-le în jos.
Aliniați laturile
La determină lungimea corespunzătoare prin care trebuie să mutăm laturile în jos, ne întoarcem la trigonometrie. Trebuie să găsim X, la fel de y este lățimea laturilor (este egală cu mărimea căptușelii) .panglică) și unghiul θ este de 45 ° (unghiul de înclinare).
Rezultați X atunci trebuie să fie înjumătățite, deoarece există o stânga și o parte dreaptă, de asemenea.
Dacă utilizați orice preprocesor CSS, verificați dacă are a bronza funcția, altfel se referă la o diagramă tangentă sau un calculator la aflați valoarea tangentă a unghiului. Suntem norocoși tan 45 ° este 1, ceea ce înseamnă că valoarea X este egal cu y în cazul nostru.
.panglică: înainte, .ribbon: după background-color: moștenire; (var (- p) / 2); lățimea: var (- p););
De cand X trebuia să fie înjumătățite, noi folosim calc () Funcția CSS pentru efectuarea divizării --p variabil.
În cele din urmă avem nevoie aliniați laturile de-a lungul axei z de asemenea, să adăugăm z-index: -1 pentru a plasați-le în spatele porțiunii mediane a panglicii.
.panglică: înainte, .ribbon: după background-color: moștenire; (var / -p) / 2); lățime: var (-p); z- index: -1;
Acum că am aliniat laturile, panglica noastră CSS se face.
Mai jos puteți revedea din nou demo-ul live, vă rugăm să rețineți că utilizează și unele stilouri suplimentare.
