Kako ustvariti Cut-out obrobo Design s CSS
Z mejne oblike uporabnikom lahko pokažemo, kaj je mogoče najti pod mejno območje elementa HTML. Ta naloga je običajno rešena z zlaganje dveh ali več blok elementov (v večini primerov div) različnih velikosti drug na drugega. Najprej se to zdi lahka rešitev, vendar postane bolj frustrirajuče, če želite ponovno uporabiti postavitev večkrat, se premikati po elementih, optimizirati obliko za mobilne naprave ali ohraniti kodo.
V tej objavi vam bom pokazal elegantno rešitev, ki uporablja samo CSS samo en element HTML doseči enak učinek. Ta tehnika je odlična tudi za dostopnost naloži sliko ozadja v CSS, ločeno od HTML-ja.
Do konca te objave boste vedeli, kako prikaže sliko ozadja v obmejnem območju za ustvarjanje mejne oblike spodaj si lahko ogledate. Pokazal bom tudi, kako lahko naredite odziv na oblikovanje z uporabo prikaznih enot.
Začetna koda
Edina zahteva v sprednji strani HTML je a blok element:
Morali bomo ponovno uporabo dimenzije (širina in višina) in širina obrobe za. \ t div, zato jih predstavljam kot spremenljivke CSS. Spremenljivka --w označuje premer od .cb blok element, --h označuje svoj višine, --b gre za širino obrobe, in --b2 za širino meje pomnožimo z 2. Kasneje bomo videli uporabo zadnje spremenljivke.
Dimenzioniram Enota Izboljšamo zgornjo kodo tako, da dodamo ozadje in nastavimo obrobo, višino in širino z uporabo naših vnaprej določenih spremenljivk CSS. Tako naj bi demo zdaj izgledal: Potrebujemo sliko za ozadje pokriva celotno območje. \ t Če želite sliki za ozadje določiti določeno velikost, se prepričajte, da ji velikost omogoča, da pokrije obmejno območje The širina slike ozadja [ Podobno višina slike ozadja [ Tako smo sliko ozadja spremenili v območje, ki je enako velikosti The Opomba: Če dodajate polnilo To je tisto, kar imamo zdaj: Zdaj, ko smo zajeli območje, ki vključuje mejo, z sliko ozadja, vse, kar ostane, je središče znotraj meje (območje, ki izključuje obrobo) s polno barvo, za katero pridemo do Horizontalna senca z vrednostjo V predstavitvi Codepen lahko vidite belo obrobo okoli slike. Tu je slavni trik z uporabo box-shadows za ustvarjanje več meja-lahko uporabimo isto tehniko dodajte eno ali več obrobnih barv našega oblikovanja. Posodobljeno The V mojem končnem demonu Codepen sem postavil kodo za sliko za ozadje in barvo senčnega polja v ločen razred. To je neobvezno, vendar je lahko zelo koristno, če želite ponovno uporabite obliko izrezane meje v več elementih in dodajte estetiko (sliko ozadja + barva) za vsak element posebej. Dodal sem imenovan razred Od Za nastavitev vrednosti Ker so dimenzije v enoti Opomba: Ne pozabi dodajte metaoznako zaslona na svojo stran HTML, če ste se odločili, da jo optimizirate za mobilni prikaz.vw enoto (lahko uporabite fiksne enote, če želite). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Hitra razlaga -
vw in vh enotvw predstavlja 1/100th širine prikaza. Na primer, 50vw je 50 delov širine prikaza narezane navpično na 100 enakih delov, medtem 50vh je 50 delov višine pogleda narezane vodoravno na 100 enakih delov. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); ozadje: url (bg.jpg); border: var (- b) pregleden; višina: var (- h); width: var (- w);
Velikost slike ozadja
ozadju vrednost, ki jo dajem: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); ozadje: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) pregleden; višina: var (- h); width: var (- w);
calc (var (- w) + var (- b2))] je vsota širina razdelka [var (- w)] in širina leve in desne meje [var (- b2)].calc (var (- h) + var (- b2))] je vsota višina razdelka [var (- h)] in širina zgornje in spodnje meje [var (- b2)].div (vključno z obmejnim območjem).center ključno besedo poravna sliko ozadja do središča mesta div.div, ne pozabite vključuje območje oblazinjenja tudi na velikost ozadja, enako kot obmejno območje.
Pokrijte območje, ki izključuje meje
box-shadow inset. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); ozadje: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) pregleden; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); višina: var (- h); width: var (- w);
var (- w) pokriva celotno širino. \ t div. Uporaba rgba funkcija barve omogoča nekaj preglednosti za dodajanje v mešanico pa lahko uporabite tudi neprozorno barvo, če želite v celoti pokriti središče.
Dodajte dodatno mejo z
box-shadowbox-shadow vrednost je: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); ozadje: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) pregleden; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) bela; višina: var (- h); width: var (- w);
calc (var (- b) / 2) funkcija ustvarja senco polovico širine meje.
Izbirno: Ločena postavitev in estetika
.poster1 do .poster1 -tbgc: rgba (0,120,237, .5); slika ozadja: url ("http://bit.ly/2eQBij2"); ozadju je skrajšana lastnina, njegove lastnosti se lahko preglasijo / nastavijo posamično. Zato lahko nastavimo slika ozadja v .poster1, in odstranite vrednost URL-ja iz ozadju nepremičnine v .cb.box-shadow, lahko uporabimo druga spremenljivka CSS. The --tbgc spremenljivko ima vrednost barve želimo podariti box-shadow (lightblue v demo), tako da je med stilskimi pravili za .cb mi nadomestite barvno vrednost box-shadow lastnine var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); ozadje: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) pregleden; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) bela; višina: var (- h); width: var (- w);
Koda za pokončni način
vw, bo videti premajhno ko gledate zasnovo v pokončnem načinu (manjša širina glede na višino), v katero so privzeto vključene vse mobilne naprave. Za rešitev tega vprašanja, stikalo vw z vh, in spremenite velikost modela kot vidite za pokončne načine. @media (orientacija: portret) .cb --w: 35vh; --h: 40vh; --b: 4vh;
