Cum se creează un design frontal cu CSS
Cu cut-out design de frontieră putem să arătăm utilizatorilor ce pot fi găsiți sub aria de frontieră a unui element HTML. Această sarcină este de obicei rezolvată de stivuirea a două sau mai multe elemente bloc (în cele mai multe cazuri divs) de dimensiuni diferite unul peste celălalt. Mai întâi, aceasta pare a fi o soluție fără efort, dar devine mai frustrant atunci când doriți să reutilizați aspectul de mai multe ori, să vă mișcați în jurul elementelor, să optimizați designul pentru mobil sau să păstrați codul.
În acest post, vă voi arăta o soluție exclusivă pentru CSS care o folosește doar un singur element HTML pentru a obține același efect. Această tehnică este de asemenea excelentă pentru accesibilitate, așa cum este ea încarcă imaginea de fundal în CSS, separat de HTML.
Până la sfârșitul acestui post, veți ști cum să afișați o imagine de fundal în zona de frontieră în scopul de a crea cut-out design de frontieră puteți vedea mai jos. Voi arăta, de asemenea, cum puteți face designul receptiv utilizând unități de vizualizare.
Codul inițial
Singura cerință din frontul HTML este a bloc element:
Va trebui reutilizarea dimensiunile (lățimea și înălțimea) și valorile lățimii marginilor div, așa că le introduc ca variabile CSS. Variabila --w denotă lăţime din .cb bloc element, --h indică înălţime, --b merge pentru lățimea graniței, și --b2 pentru lățimea graniței înmulțită cu 2. Mai târziu, vom vedea utilizarea ultimei variabile.
Mă sortează Unitatea Să îmbunătățim codul de mai sus adăugând un fundal și setând marginea, înălțimea și lățimea prin utilizarea variabilelor CSS predefinite. Iată cum ar trebui să arate demo-ul acum: Avem nevoie de imaginea de fundal pentru acoperă întreaga zonă a Dacă doriți să dați imaginii de fundal o dimensiune fixă, asigurați-vă că dimensiunea pe care o dați îi permite să acopere zona de frontieră a lățimea imaginii de fundal [ În mod similar, înălțimea imaginii de fundal [ În acest fel, am dimensionat imaginea de fundal într-o zonă care este aceeași cu dimensiunea Notă: Dacă adăugați elemente de umplutură la Aceasta este ceea ce avem acum: Acum că am acoperit zona de frontieră inclusiv cu imaginea de fundal, tot ce rămâne este de a acoperă zona centrală din interiorul frontierei (zona exclusivă a frontierei), cu o culoare solidă, pentru care ajungem pentru o Umbra orizontală cu valoare În demonstrația Codepen, ați putea vedea o margine albă în jurul imaginii. Există un truc faimos folosind umbre de box pentru a crea mai multe frontiere-putem folosi aceeași tehnică adăugați una sau mai multe margini colorate solide la designul nostru. Actualizată În demo-ul meu final Codepen, am plasat codul pentru imaginea de fundal și culoarea umbrei în cutie într-o clasă separată. Aceasta este facultativ, dar poate fi extrem de util dacă doriți refolosiți aspectul designului de decupare în mai multe elemente și adăugați estetic (imagine de fundal + culoare) pentru fiecare element în mod independent. Am adăugat o clasă numită De cand Pentru a seta valoarea Deoarece dimensiunile sunt toate în unitate Notă: Nu uita adăugați meta-tag-ul de vizualizare la pagina dvs. HTML dacă v-ați hotărât să o optimizați pentru vizualizarea pe mobil.vw (puteți utiliza unități fixe dacă doriți). .cb -w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2);
Explicație rapidă -
vw și vh Unitățivw reprezintă 1/100lea din lățimea ferestrei de vizualizare. De exemplu, 50vw este de 50 de părți dintr-o lățime a ferestrei de vizualizare tăiată vertical în 100 de părți egale, in timp ce 50vh este de 50 de părți dintr-o înălțime a ferestrei de vedere tăiat orizontal în 100 de părți egale. .cb -w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundal: url (bg.jpg); frontieră: var (- b) solid transparent; înălțime: var (- h); lățime: var (- w);
Dimensiunea imaginii de fundal
fundal valoare dau-o: .cb -w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundal: url (bg.jpg) centru / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); frontieră: var (- b) solid transparent; înălțime: var (- h); lățime: var (- w);
calc (var (- w) + var (- b2))] este suma lățimea div [var (- w)] si lățimea marginilor din stânga și din dreapta [var (- b2)].calc (var (- h) + var (- b2))] este suma înălțimea div [var (- h)] si lățimea marginilor de sus și de jos [var (- b2)].div (inclusiv zona de frontieră).centru cuvinte cheie aliniază imaginea de fundal în centrul div.div, a își aminti să includeți zona de umplutură la dimensiunea fundalului, la fel ca zona de frontieră.
Acoperiți zona exclusivă a frontierei
box-shadow medalion. .cb -w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundal: url (bg.jpg) centru / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); frontieră: var (- b) solid transparent; box-shadow: inserție var (- w) 0 0 rgba (0,120,237, .5); înălțime: var (- h); lățime: var (- w);
var (- w) acoperă toată lățimea div. Utilizarea RGBA permite funcția de culoare unele transparente pentru a fi adăugat în mix, cu toate acestea puteți utiliza și o culoare opacă dacă doriți să acoperiți complet zona centrală.
Adăugați o frontieră suplimentară cu
box-shadowbox-shadow valoarea este: .cb -w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundal: url (bg.jpg) centru / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); frontieră: var (- b) solid transparent; box-shadow: inserție var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) alb; înălțime: var (- h); lățime: var (- w);
calc (var (-b) / 2) funcția creează o umbră a jumătate din lățimea marginii.
Opțional: aspect separat și estetică
.poster1 la .poster1 -tbgc: rgba (0,120,237, .5); fundal-imagine: url ("http://bit.ly/2eQBij2"); fundal este o proprietate stenografică, proprietățile lungi pot fi suprascrise / setate individual. Prin urmare, putem stabili imagine de fundal în .poster1, și eliminați valoarea url din fundal proprietate în .cb.box-shadow, putem folosi o altă variabilă CSS. --tbgc variabil menține valoarea culorii vrem să dăm la umbra box-ului (blondă în demo), deci printre regulile de stil pentru .cb noi înlocuiți valoarea culorii box-shadow proprietate cu var (- tbgc). .cb -w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundal: centru / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); frontieră: var (- b) solid transparent; box-shadow: inserție var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) alb; înălțime: var (- h); lățime: var (- w);
Cod pentru modul portret
vw, o sa arata prea mic când vizualizați designul în modul portret (o lățime mai mică în raport cu înălțimea) - la care toate dispozitivele mobile sunt implicite. Pentru a rezolva această problemă, intrerupator vw cu vh, și redimensionarea designului după cum considerați potrivit pentru modurile portret. @media (orientare: portret) .cb --w: 35vh; --h: 40vh; --b: 4vh;
