Kuidas luua väljalõigete piiri disain CSS-iga
Koos väljalülitatud piiridisain saame kasutajatele näidata, mida võib leida HTML-elemendi piirialal. See ülesanne lahendatakse tavaliselt kahe või enama ploki elemendi virnastamine (enamikul juhtudel divs) erineva suurusega üksteise peale. Kõigepealt tundub see olevat lihtne lahendus, kuid see muutub rohkem heidutavaks, kui soovid paigutust korduvalt kasutada, liikuda elementide ümber, optimeerida mobiili kujundust või säilitada koodi.
Selles postituses näitan sulle elegantset CSS-lahendust, mis kasutab ainult üks HTML-element sama mõju saavutamiseks. See tehnika sobib ka juurdepääsetavuse jaoks laadib taustapildi CSS-i, eraldatud HTML-ist.
Selle postituse lõpuks saate teada, kuidas seda teha kuvada piirialal taustapilt et luua väljalülitatud piiridisain näete allpool. Ma näitan ka seda, kuidas saate disaini reageerida kasutades vaatepordi üksusi.
Esmane kood
HTML-i ees on ainus nõue a ploki element:
Me peame taaskasuta mõõtmed (laius ja kõrgus) ja piiri laiuse väärtused div, nii et ma tutvustan neid CSS-muutujatena. Muutuja --w tähistab laius selle .cb ploki element, --h näitab selle kõrgus, --b läheb piiri laius, ja --b2 piirilaiuse korral korrutatakse 2. Me näeme hiljem viimase muutuja kasutamist.
Ma olen suurusega Ühik Parandame ülaltoodud koodi, lisades tausta ja seades piiri, kõrguse ja laiuse kasutades meie eelnevalt määratud CSS-muutujaid. See, kuidas demo peaks praegu välja nägema, on järgmine: Me vajame taustapilti katma kogu piirkonna Kui soovid anda taustapildile fikseeritud suuruse, siis veenduge, et teie antud suurus võimaldab selle katta piirialaga The taustapildi laius [ Samamoodi on taustapildi kõrgus [ Sel moel oleme kujundanud taustapildi sama suurusega piirkonnale The Märge: Kui lisate Seda me praegu oleme: Nüüd, kui me oleme hõlmanud piiripiirkonda taustapildiga, on kõik see, mis jääb katta piiripinna keskosa (piiriväline ala), millel on kindel värv, mille jaoks me jõuame a Väärtusega horisontaalne vari Demodis Codepen näete pildi ümber valge serva. Seal on kuulus trikk kastide varjude kasutamine mitme piiri loomiseks-saame kasutada sama tehnikat lisage üks või mitu värvilist piiri meie disainile. Värskendatud The Minu viimases Codepeni demos olen paigutanud taustapildi ja kasti-varju värvi koodi eraldi klassi. See on vabatahtlik, kuid see võib olla väga kasulik, kui soovite korduvkasutatava piirikonstruktsiooni paigutus mitmetes elementides ja lisage iga elemendi esteetika (taustapilt + värv) sõltumatult. Olen lisanud nimega klassi Alates sellest ajast Väärtuse määramiseks Kuna mõõtmed on kõik üksuses Märge: Ära unusta lisada vaateava metakood HTML-lehele, kui olete otsustanud selle mobiilivaates optimeerida.vw üksus (kui soovite, saate kasutada fikseeritud üksusi). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: arvutatud (var (- b) * 2);
Kiire selgitus -
vw ja vh üksusedvw tähistab 1/100th vaateava laiusest. Näiteks, 50vw on 50 osa vaateava laiusest lõigatakse vertikaalselt 100 võrdseks osaks, samal ajal 50vh on 50 osa vaateava kõrgusest viilutatud horisontaalselt 100 võrdseks osaks. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: arvutatud (var (- b) * 2); taust: url (bg.jpg); piir: var (- b) tahke läbipaistev; kõrgus: var (- h); laius: var (- w);
Suurenda taustapilt
taustal väärtus, mida ma annan: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: arvutatud (var (- b) * 2); taust: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); piir: var (- b) tahke läbipaistev; kõrgus: var (- h); laius: var (- w);
arvutatud (var (- w) + var (- b2))] on summa div. laius [var (- w)] ja vasak- ja parempoolsete piiride laius [var (- b2)].calc (var (- h) + var (- b2))] on summa div. kõrgus [var (- h)] ja ülemise ja alumise piiri laius [var (- b2)].div (sealhulgas piiriala).Keskus märksõna joondab taustapildi keskele div.div, pea meeles sisaldama polsterdusala ka taustapiirile, sama mis piirialal.
Katke piiriväline ala
kast-vari sisetükk. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: arvutatud (var (- b) * 2); taust: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); piir: var (- b) tahke läbipaistev; box-shadow: sisetükk var (- w) 0 0 rgba (0,120,237, .5); kõrgus: var (- h); laius: var (- w);
var (- w) katab kogu div. Kasutamine rgba värvifunktsioon võimaldab mõningane läbipaistvus lisada segusse, aga võite kasutada ka läbipaistmatut värvi, kui soovite keskpinna täielikult katta.
Lisage lisapiir
kast-varikast-vari väärtus on: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: arvutatud (var (- b) * 2); taust: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); piir: var (- b) tahke läbipaistev; kast-vari: sisetükk var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 kalts (var (- b) / 2) valge; kõrgus: var (- h); laius: var (- w);
calc (var (- b) / 2) funktsioon loob varju pool piiri laiusest.
Valikuline: eraldi paigutus ja esteetika
.plakat1 Euroopa .poster1 --tbgc: rgba (0,120,237, .5); taustapilt: url ("http://bit.ly/2eQBij2"); taustal on lühiajaline vara, selle pikamaaomadusi saab individuaalselt tühistada / seadistada. Seega saame määrata taustapilt sisse .plakat1, ja eemaldage URL-i URL-i väärtus taustal kinnisvara .cb.kast-vari, me saame kasutada teine CSS muutuja. The --tbgc muutuja hoiab värvi väärtust me tahame anda kasti-varju (demo), st stiilireeglite hulka .cb me asenda kast-vari vara koos var (- tbgc). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: arvutatud (var (- b) * 2); taust: keskus / arv (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); piir: var (- b) tahke läbipaistev; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) valge; kõrgus: var (- h); laius: var (- w);
Portree režiimi kood
vw, see on tundub liiga väike kui vaatate kujutist portree režiimis (kõrguselt väiksem), mille kõik mobiilseadmed on vaikimisi. Selle probleemi lahendamiseks, lüliti vw koos vh, ja kujunduse suurust nagu näete portree režiimidele. @media (orientatsioon: portree) .cb --w: 35vh; --h: 40vh; - b: 4vh;
