Kaip sukurti išjungimo sienos dizainą su CSS
Su ribinis dizainas mes galime parodyti vartotojams, ką galima rasti po HTML elemento pasienio zona. Ši užduotis paprastai sprendžiama sukrauti du ar daugiau blokų elementų (daugeliu atvejų „divs“) skirtingų dydžių vienas ant kito. Pirmiausia tai atrodo lengvas sprendimas, tačiau jis tampa labiau varginantis, kai norėsite pakartotinai naudoti išdėstymą kelis kartus, judėti elementais, optimizuoti mobiliojo ryšio dizainą arba išlaikyti kodą.
Šiame pranešime aš jums parodysiu elegantišką CSS tirpalą, kuris naudoja tik vienas HTML elementas pasiekti tą patį poveikį. Šis metodas taip pat puikiai tinka prieinamumui įkelia fono vaizdą CSS, atskirtas nuo HTML.
Iki šio pranešimo pabaigos žinosite, kaip rodyti sienos vaizdą pasienio zonoje siekiant sukurti ribinis dizainas galite pamatyti toliau. Aš taip pat parodysiu, kaip galite padaryti dizainą atsakingą naudojant „viewport“ vienetus.
Pradinis kodas
Vienintelis reikalavimas HTML priekyje yra a bloko elementas:
Mums reikės pakartotinis naudojimas matmenys (plotis ir aukštis) ir sienos plotio vertės. \ t div, taigi aš juos pristatau kaip CSS kintamieji. Kintamasis --w reiškia plotis iš .cb bloko elementas, --h rodo jo aukštis, --b eina už sienos plotis, ir --b2 sienos plotis padaugintas iš 2. Vėliau matysime paskutinio kintamojo naudojimą.
Aš dydžio Įrenginys Patobulinkime aukščiau esantį kodą pridedant foną ir nustatydami sieną, aukštį ir plotį naudojant mūsų iš anksto nustatytus CSS kintamuosius. Štai kaip demo turėtų atrodyti dabar: Mums reikia fono paveikslėlio apima visą teritoriją Jei norite suteikti fono paveikslėlį fiksuotam dydžiui, tik įsitikinkite, kad jūsų suteiktas dydis leidžia jį padengti. \ T The fono vaizdo plotis [ Panašiai ir fono vaizdo aukštis [ Tokiu būdu mes nustatėme fono paveikslėlį į tą patį plotą, kuris yra toks pat, kaip The Pastaba: Jei pridedate padding Štai ką mes turime dabar: Dabar, kai aprėpėme sieną apimančią sritį su foniniu vaizdu, viskas, kas lieka, yra uždengti sienos vidurio plotą (pasienio zona) su vientisa spalva, kuriai mes pasiekiame a Horizontalus šešėlis su verte „Codepen“ demonstracijoje aplink vaizdą galite matyti baltą sieną. Yra žinomas triukas naudojant langelio šešėlius, kad sukurtumėte kelias sienas-mes galime naudoti tą pačią techniką pridėti vieną ar daugiau tvirtų spalvų sienų prie mūsų dizaino. Atnaujinta The Mano paskutiniame „Codepen“ demonstracijoje pateikiau fono paveikslėlio ir langelio šešėlio spalvos kodą į atskirą klasę. Tai yra neprivaloma, bet gali būti labai naudinga, jei norite pakartotinai panaudokite riboto dizaino išdėstymą daugeliu elementų ir kiekvienam elementui pridėti estetiką (fono paveikslėlį + spalvą). Pridėjau pavadintą klasę Nuo Norėdami nustatyti. \ T Kadangi matmenys yra viename įrenginyje Pastaba: Nepamirškite pridėti peržiūros srities metažymą į HTML puslapį, jei nusprendėte jį optimizuoti mobiliesiems.vw vienetas (galite naudoti fiksuotus vienetus, jei norite). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2);
Greitas paaiškinimas -
vw ir vh vienetųvw reiškia 1/100th žiūrėjimo srities pločio. Pavyzdžiui, 50vw yra 50 dalių peržiūros srities pločio vertikaliai supjaustyti į 100 lygių dalių, kol 50vh yra 50 dalių peržiūros srities aukščio horizontaliai supjaustyti į 100 lygių dalių. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fonas: URL (bg.jpg); siena: var (- b) kieta skaidri; aukštis: var (- h); plotis: var (- w);
Padidinkite fono paveikslėlį
fonas vertė, kurią duodu: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fonas: url (bg.jpg) centras / Calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); siena: var (- b) kieta skaidri; aukštis: var (- h); plotis: var (- w);
Calc (var (- w) + var (- b2))] yra sumos suma div [var (- w)] ir kairiųjų ir dešiniųjų sienų plotis [var (- b2)].calc (var (- h) + var (- b2))] yra sumos suma div. aukštis [var (- h)] ir viršutinių ir apatinių sienų plotis [var (- b2)].div (įskaitant pasienio zoną).centras raktinis žodis suderina fono vaizdą į centrą div.div, Prisimink įtraukite įdėklo vietą taip pat, kaip ir pasienio zonoje.
Uždenkite išskirtinę sieną
langelis-šešėlis įdėklas. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fonas: url (bg.jpg) centras / Calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); siena: var (- b) kieta skaidri; langelis-šešėlis: įdėklas var (- w) 0 0 rgba (0,120,237, .5); aukštis: var (- h); plotis: var (- w);
var (- w) apima visą plotį div. Panaudojimas rgba leidžia spalvų funkcija šiek tiek skaidrumo jei norite pilnai uždengti centrinę sritį, galite įdėti į mišinį, tačiau taip pat galite naudoti nepermatomą spalvą.
Pridėti papildomą sieną su
langelis-šešėlislangelis-šešėlis vertė yra: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fonas: url (bg.jpg) centras / Calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); siena: var (- b) kieta skaidri; dėžutės šešėlis: įdėklas var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 Calc (var (- b) / 2) baltas; aukštis: var (- h); plotis: var (- w);
calc (var (- b) / 2) funkcija sukuria šešėlį pusė sienos pločio.
Neprivaloma: atskiras išdėstymas ir estetika
.plakatas1 į .poster1 --tbgc: rgba (0,120,237, .5); fono paveikslėlis: url ("http://bit.ly/2eQBij2"); fonas yra trumpalaikis turtas, jos ilgos rankos savybės gali būti atskiriamos atskirai. Todėl galime nustatyti fono vaizdas į .plakatas1, ir pašalinkite URL vertę iš fonas nuosavybė .cb.langelis-šešėlis, mes galime naudoti kitas CSS kintamasis. The --tbgc kintamasis turi spalvos vertę mes norime suteikti dėžutės šešėlį (šviesos atspalvį demo), todėl tarp stiliaus taisyklių .cb mes pakeisti. \ t langelis-šešėlis nuosavybė su var (- tbgc). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fonas: centras / apskaičiuotas (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); siena: var (- b) kieta skaidri; dėžutės šešėlis: įterptas var (- w) 0 0 var (- tbgc), 0 0 0 Calc (var (- b) / 2) baltas; aukštis: var (- h); plotis: var (- w);
Portreto režimo kodas
vw, jis bus atrodo per mažas kai žiūrite dizainą portreto režimu (mažesnis plotis, palyginti su aukščiu), kuriame visi mobilieji įrenginiai yra numatytieji. Norėdami išspręsti šią problemą, jungiklis vw su vh, ir keisti dizaino dydį kaip matote tinka portreto režimams. @media (orientacija: portretas) .cb --w: 35vh; --h: 40vh; - b: 4vh;
