Kako stvoriti Cut-out granica dizajn s CSS
S granični dizajn možemo pokazati korisnicima što se može pronaći ispod graničnog područja HTML elementa. Taj se zadatak obično rješava slaganje dva ili više blok elemenata (u većini slučajeva divs) različitih veličina jedan na drugi. Prvo ovo izgleda kao rješenje bez napora, ali postaje sve više frustrirajuće kada želite ponovno koristiti izgled više puta, kretati se po elementima, optimizirati dizajn za mobilne uređaje ili održavati kod.
U ovom postu, pokazat ću vam elegantno CSS-rješenje koje koristi samo jedan HTML element postići isti učinak. Ova tehnika je također izvrsna za pristupačnost, kao i za nju učitava pozadinsku sliku u CSS, odvojeno od HTML-a.
Do kraja ovog posta, znat ćete kako prikazati pozadinsku sliku u pograničnom području kako bi stvorili. \ t granični dizajn možete vidjeti u nastavku. Također ću vam pokazati kako možete prilagoditi dizajn pomoću jedinica prikaza.
Inicijalni kod
Jedini zahtjev u HTML frontu je a element bloka:
Morat ćemo ponovo upotrijebiti dimenzije (širina i visina) i vrijednosti širine granice div, pa ih predstavljam kao CSS varijable. Varijabla --w označava širina od .cb element bloka, --h označava svoj visina, --b ide za širina obruba, i --b2 za širinu granice pomnoženu s 2. Kasnije ćemo vidjeti posljednju varijablu.
Dimenzioniram Jedinica Poboljšamo gore navedeni kod dodavanjem pozadine i postavljanjem granice, visine i širine pomoću naših unaprijed definiranih CSS varijabli. Evo kako bi trebao izgledati demo upravo sada: Trebamo pozadinsku sliku pokrivaju cijelo područje Ako pozadinskoj slici želite dati fiksnu veličinu, provjerite je li veličina koju dajete omogućena za pokrivanje graničnog područja širina pozadinske slike [ Slično tome, visinu pozadinske slike [ Na taj način smo odredili pozadinsku sliku za područje koje je jednako veličini Bilješka: Ako dodajete padding u To je ono što sada imamo: Sada kada smo pokrili područje koje uključuje granice s pozadinskom slikom, ostaje samo da pokriti središnje područje unutar granice (područje bez granica) sa solidnom bojom, za koju stižemo do Horizontalna sjena s vrijednošću U prikazu Codepen, oko slike možete vidjeti bijeli rub. Postoji slavni trik pomoću sjenila box-a za stvaranje više granica-možemo koristiti istu tehniku dodajte jednu ili više obojenih obruba našem dizajnu. Ažurirano U mom završnom demonu Codepen, postavila sam kôd za pozadinsku sliku i boju s kutijom u zasebnu klasu. Ovo je neobavezan, ali može biti izuzetno korisno ako želite ponovno upotrijebite raspored dizajna granice u više elemenata i dodajte estetiku (pozadinsku sliku + boju) za svaki element nezavisno. Dodao sam naziv klase Od Za postavljanje vrijednosti Budući da su dimenzije u jedinici Bilješka: Ne zaboravi dodajte meta oznaku vidnog okvira na svoju HTML stranicu ako ste odlučili optimizirati je za mobilni prikaz.VW jedinica (možete koristiti fiksne jedinice ako želite). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2);
Brzo objašnjenje -
VW i VH jediniceVW predstavlja 1/100th širine okvira za prikaz. Na primjer, 50vw je 50 dijelova širine prikaza narezane okomito na 100 jednakih dijelova, dok 50vh je 50 dijelova visine prozora narezane vodoravno na 100 jednakih dijelova. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); pozadina: url (bg.jpg); border: var (- b) solid transparent; visina: var (- h); width: var (- w);
Veličina pozadinske slike
pozadina vrijednost koju dajem: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; visina: var (- h); width: var (- w);
calc (var (- w) + var (- b2))] je zbroj širina podjele [var (- t)] i širina lijeve i desne granice [var (- b2)].calc (var (- h) + var (- b2))] je zbroj visina div [var (- h)] i širina gornje i donje granice [var (- b2)].div (uključujući i granično područje).centar ključna riječ poravnava pozadinsku sliku do središta mjesta div.div, Zapamti uključuju područje popunjavanja i na veličinu pozadine, isto kao i na granično područje.
Pokrijte područje koje isključuje granice
kutija-sjena umetak. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; box-shadow: umetnuti var (- w) 0 0 rgba (0,120,237, .5); visina: var (- h); width: var (- w);
var (- t) pokriva cijelu širinu div. Korištenje RGBA funkcija boje omogućuje neka transparentnost Za dodavanje u mješavinu možete koristiti i neprozirnu boju ako želite potpuno pokriti središnje područje.
Dodajte dodatnu granicu s
kutija-sjenakutija-sjena vrijednost je: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; box-shadow: umetnuti var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) bijelo; visina: var (- h); width: var (- w);
calc (var (- b) / 2) funkcija stvara sjenu pola širine granice.
Izborno: Odvojeni raspored i estetika
.poster1 prema .poster1 -tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); pozadina je skraćeno vlasništvo, svojstva dugih ruku mogu se poništiti / postaviti pojedinačno. Dakle, možemo postaviti pozadinska slika u .poster1, i uklonite URL adresu iz pozadina u .cb.kutija-sjena, možemo koristiti drugu CSS varijablu. --tbgc varijabla sadrži vrijednost boje želimo dati box-shadow (lightblue u demo-u), tako da je među pravilima stila .cb mi zamijenite vrijednost boje kutija-sjena s var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); pozadina: centar / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; box-shadow: umetnuti var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) bijelo; visina: var (- h); width: var (- w);
Kod za portretni način rada
VW, hoće izgledati premalo kada pregledavate dizajn u portretnom načinu (manja širina u odnosu na visinu) - u što su svi mobilni uređaji prema zadanim postavkama. Kako bi riješili ovaj problem, prekidač VW s VH, i promijenite veličinu dizajna kao što vidite prikladno za portretne načine. @media (orijentacija: portret) .cb --w: 35vh; --h: 40vh; --b: 4vh;
