Miten luodaan katkaisuraja suunnittelu CSS n avulla
Kanssa raja-alue voimme näyttää käyttäjille, mitä löytyy HTML-elementin raja-alueen alapuolella. Tämä tehtävä ratkaistaan tyypillisesti pinotaan kaksi tai useampia lohkoelementtejä (useimmiten divs) erikokoisia päällekkäin. Tämä tuntuu ensinnäkin vaivattomalta ratkaisulta, mutta se saa turhauttavaa, kun haluat käyttää uudelleen ulkoasua useita kertoja, liikkua elementtien ympäri, optimoida mobiilin suunnittelun tai ylläpitää koodia.
Tässä viestissä näytän sinulle elegantin CSS-ratkaisun, joka käyttää vain yksi HTML-elementti saavuttaa sama vaikutus. Tämä tekniikka on myös hyvä saavutettavuuden kannalta lataa taustakuvan CSS: ään, erotettu HTML: stä.
Tämän viestin loppuun mennessä tiedät miten näyttää taustakuvan raja-alueella luoda raja-alue näet alla. Näytän myös, miten voit suunnitella muotoilun Viewport-yksiköiden avulla.
Alkuperäinen koodi
Ainoa vaatimus HTML-etuosassa on a lohkoelementti:
Meidän täytyy käyttää uudelleen mitat (leveys ja korkeus) ja reunan leveysarvot div, joten minä esitän ne CSS-muuttujina. Muuttuja --w tarkoittaa leveys n .CB lohkoelementti, --h osoittaa sen korkeus, --b menee reunan leveys, ja --b2 rajaleveyden kerrottuna kahdella kerralla. Näemme myöhemmin viimeisen muuttujan käytön.
Olen mitoitus Yksikkö Paranna edellä mainittua koodia lisäämällä tausta ja asettamalla raja, korkeus ja leveys käyttämällä ennalta määritettyjä CSS-muuttujia. Seuraavassa kuvataan, miten demo näyttää tällä hetkellä: Tarvitsemme taustakuvan kattavat koko alueen Jos haluat antaa taustakuvan kiinteälle koolle, varmista, että antamasi koko mahdollistaa sen, että se kattaa taustakuvan leveys [ Samoin taustakuvan korkeus [ Tällä tavoin olemme koonneet taustakuvan alueelle, joka on sama kuin Huomautus: Jos lisäät Tämä on juuri nyt: Nyt kun olemme peittäneet rajanylitysalueen taustakuvalla, kaikki jäljellä on peitä keskuksen sisäpuolella (raja-alue), jolla on kiinteä väri, jota varten saavutamme a Vaakasuora varjo, jolla on arvo Codepen-demossa voit nähdä kuvan ympärillä valkoisen reunan. Siellä on kuuluisa temppu käyttämällä ruudun varjoja luomaan useita rajoja-voimme käyttää samaa tekniikkaa lisää yksi tai useampi värillinen raja meidän suunnitteluun. Päivitetty Viimeisessä Codepen-demossani olen asettanut taustakuvan ja laatikon varjostuskoodin osaksi erillistä luokkaa. Tämä on valinnainen, mutta voi olla erittäin hyödyllinen, jos haluat uudelleenkäytön rajapinnan muotoilu useita elementtejä ja lisää estetiikka (taustakuva + väri) kullekin elementille itsenäisesti. Olen lisännyt luokan nimeltä Siitä asti kun Aseta arvon arvo Koska mitat ovat kaikki yksikössä Huomautus: Älä unohda lisää katseluportin metatunniste HTML-sivulle, jos olet päättänyt optimoida sen mobiilinäkymään.VW yksikkö (voit käyttää kiinteitä yksiköitä, jos haluat). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: laskettu (var (- b) * 2);
Nopea selitys -
VW ja vh yksikötVW edustaa 1/100th näkymän portin leveydestä. Esimerkiksi, 50vw on 50 osaa katseluportin leveydestä leikataan pystysuoraan 100: een osaan, sillä aikaa 50vh on 50 osaa katseluportin korkeudesta leikataan vaakasuoraan 100: een osaan. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: laskettu (var (- b) * 2); tausta: url (bg.jpg); raja: var (- b) kiinteä läpinäkyvä; korkeus: var (- h); leveys: var (- w);
Koko taustakuva
tausta arvo, jonka annan sille: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: laskettu (var (- b) * 2); tausta: url (bg.jpg) center / calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); raja: var (- b) kiinteä läpinäkyvä; korkeus: var (- h); leveys: var (- w);
laskettu (var (- w) + var (- b2))] on summa levyn leveys [var (- w)] ja vasemman ja oikean reunan leveys [var (- b2)].Calc (var (- h) + var (- b2))] on summa divin korkeus [var (- h)] ja ylä- ja alareunojen leveys [var (- b2)].div (mukaan lukien raja-alue).keskusta avainsana tasaa taustakuvan keskelle div.div, muista sisällytä pehmustusalue samoin kuin raja-alue.
Peitä raja-alue
box-varjo liite. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: laskettu (var (- b) * 2); tausta: url (bg.jpg) center / calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); raja: var (- b) kiinteä läpinäkyvä; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); korkeus: var (- h); leveys: var (- w);
var (- w) kattaa koko div. Käyttö RGBA väritoiminto sallii jonkin verran avoimuutta lisätään sekoitukseen, mutta voit myös käyttää läpinäkymättömää väriä, jos haluat peittää keskiosan kokonaan.
Lisää ylimääräinen raja
box-varjobox-varjo arvo on: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: laskettu (var (- b) * 2); tausta: url (bg.jpg) center / calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); raja: var (- b) kiinteä läpinäkyvä; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 laskettu (var (- b) / 2) valkoinen; korkeus: var (- h); leveys: var (- w);
laskettu (var (- b) / 2) toiminto luo varjon puolet reunan leveydestä.
Valinnainen: erillinen asettelu ja esteettisyys
.poster1 että .juliste1 --tbgc: rgba (0,120,237, .5); taustakuva: url ("http://bit.ly/2eQBij2"); tausta on lyhytominaisuus, sen pitkäaikaiset ominaisuudet voidaan ohittaa / asettaa erikseen. Siksi voimme asettaa taustakuva sisään .poster1, ja poista URL-osoitteen arvo tausta omaisuutta .CB.box-varjo, voimme käyttää toinen CSS-muuttuja. --tbgc muuttuja pitää väriarvon haluamme antaa laatikkovarjolle (demo), joten niiden tyylien mukaan .CB me korvaa värin arvo box-varjo omaisuutta var (- tbgc). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: laskettu (var (- b) * 2); tausta: keskipiste / laskettu (var (- w) + var (- b2)) laskettu (var (- h) + var (- b2)); raja: var (- b) kiinteä läpinäkyvä; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 laskettu (var (- b) / 2) valkoinen; korkeus: var (- h); leveys: var (- w);
Koodi muotokuvaustilaan
VW, se tulee näyttää liian pieneltä kun tarkastelet muotoilua muotokuva-tilassa (pienempi leveys suhteessa korkeuteen), jonka kaikki mobiililaitteet ovat oletusarvoisesti. Voit ratkaista tämän ongelman, vaihtaa VW kanssa vh, ja suunnitelman kokoa kuten näette sopivaksi muotokuvaustiloihin. @media (suunta: muotokuva) .cb --w: 35vh; --h: 40vh; - b: 4vh;
