Hvordan lage en utklipps kantdesign med CSS
Med en cut-out grense design Vi kan vise til brukerne hva som finnes under grenseområdet til et HTML-element. Denne oppgaven løses vanligvis av stabling av to eller flere blokkelementer (i de fleste tilfeller div) av forskjellige størrelser oppå hverandre. Først ser dette ut til en enkel løsning, men det blir mer frustrerende når du vil bruke layouten flere ganger, flytte elementene, optimalisere designen for mobil, eller opprettholde koden.
I dette innlegget skal jeg vise deg en elegant CSS-only-løsning som bruker bare ett HTML-element for å oppnå samme effekt. Denne teknikken er også stor for tilgjengelighet, som den Laster bakgrunnsbildet i CSS, skilt fra HTML-koden.
Ved slutten av dette innlegget, vil du vite hvordan du skal vis et bakgrunnsbilde i grenseområdet for å opprette cut-out grense design Du kan se nedenfor. Jeg vil også vise hvordan du kan gjøre designen lydhør bruker visningsenheter.
Innledende kode
Det eneste kravet i HTML-fronten er a blokkelement:
Vi må bruke om igjen dimensjonene (bredde og høyde) og grensebreddsverdiene for div, så jeg introduserer dem som CSS variabler. Variabelen --w betegner bredde av .cb blokkelement, --h indikerer det høyde, --b går for kantbredde, og --b2 for kantbredden multiplisert med 2. Vi ser senere bruken av den siste variabelen.
Jeg limer størrelsen på Enheten La oss forbedre koden ovenfor ved å legge til en bakgrunn, og sette grensen, høyden og bredden ved å bruke våre forhåndsdefinerte CSS-variabler. Slik ser demoen ut akkurat nå: Vi trenger bakgrunnsbildet til dekke hele området av Hvis du vil gi bakgrunnsbildet en fast størrelse, bare sørg for at størrelsen du gir, gjør det mulig å dekke grenseområdet til De bredden på bakgrunnsbildet [ På samme måte, høyde på bakgrunnsbildet [ På denne måten har vi format bakgrunnsbildet til et område som er det samme som størrelsen på De Merk: Hvis du legger til polstring til Dette er hva vi har akkurat nå: Nå som vi har dekket grenseområdet med bakgrunnsbildet, er alt som gjenstår å dekke midtområdet innenfor grensen (grense eksklusivt område) med en solid farge, som vi nå for en Den horisontale skyggen med verdi I Codepen-demoen kan du se en hvit ramme rundt bildet. Det er et berømt triks av bruker bokseskygger for å lage flere grenser-vi kan bruke samme teknikk til Legg til en eller flere solide farger til vårt design. Den oppdaterte De I min siste Codepen-demo har jeg plassert koden for bakgrunnsbildet og boksen-skyggefargen inn i en egen klasse. Dette er valgfri, men kan være svært nyttig hvis du vil gjenta utformingen av den utklippte grenseutformingen i flere elementer, og legg til estetikken (bakgrunnsbilde + farge) for hvert element uavhengig. Jeg har lagt til en klasse som heter Siden For å angi verdien av Siden dimensjonene er alle i enheten Merk: Ikke glem å legg til visningsport metataggen til HTML-siden din hvis du har bestemt deg for å optimalisere den for mobilvisning.vw enhet (du kan bruke faste enheter hvis du vil). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Rask forklaring -
vw og vh enhetervw representerer 1/100th av bredden på visningsporten. For eksempel, 50vw er 50 deler av en visningsbredde skåret vertikalt i 100 like deler, samtidig som 50vh er 50 deler av en visningshøyde skåret horisontalt i 100 like deler. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrunn: url (bg.jpg); grense: var (- b) solid gjennomsiktig; høyde: var (- h); bredde: var (- w);
Størr bakgrunnsbildet
bakgrunn verdi jeg gir den: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrunn: url (bg.jpg) senter / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); grense: var (- b) solid gjennomsiktig; høyde: var (- h); bredde: var (- w);
kalk (var (- w) + var (- b2))] er summen av bredden på div [var (- w)] og bredde på venstre og høyre kant [var (- b2)].kalk (var (- h) + var (- b2))] er summen av høyden på div [var (- h)] og bredde på topp og nedre kant [var (- b2)].div (inkludert grenseområdet).senter søkeord justerer bakgrunnsbildet til sentrum av div.div, Husk å inkludere polstringsområdet til bakgrunnsstørrelsen også, det samme som grenseområdet.
Dekk grensen eksklusivt område
box-shadow innfelt. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrunn: url (bg.jpg) senter / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); grense: var (- b) solid gjennomsiktig; boks-skygge: innsett var (- w) 0 0 rgba (0,120,237, .5); høyde: var (- h); bredde: var (- w);
var (- w) dekker hele bredden av div. Bruken av RGBA farge funksjon tillater litt gjennomsiktighet å bli tilsatt i blandingen, men du kan også bruke en ugjennomsiktig farge hvis du vil fullt ut dekke midtområdet.
Legg til en ekstra ramme med
box-shadowbox-shadow verdien er: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrunn: url (bg.jpg) senter / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); grense: var (- b) solid gjennomsiktig; boksskygge: innsett var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) hvit; høyde: var (- h); bredde: var (- w);
kalk (var (- b) / 2) funksjon skaper en skygge av halvparten av grensebredden.
Valgfritt: Separat layout og estetikk
.poster1 til .poster1 - tbgc: rgba (0,120,237, .5); bakgrunnsbilde: url ("http://bit.ly/2eQBij2"); bakgrunn er en shorthand eiendom, dets longhand egenskaper kan overstyres / settes individuelt. Derfor kan vi sette bakgrunnsbilde i .poster1, og fjern URL-verdien fra bakgrunn eiendom i .cb.box-shadow, Vi kan bruke en annen CSS-variabel. De --tbgc variabel har fargeverdien Vi vil gi til boksskyggen (lyseblå i demoen), så blant stilen regler for .cb vi erstatte fargeværdien til box-shadow eiendom med var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrunn: senter / kalk (var (- w) + var (- b2)) kalk (var (- h) + var (- b2)); grense: var (- b) solid gjennomsiktig; boksskygge: innsett var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) hvit; høyde: var (- h); bredde: var (- w);
Kode for stående modus
vw, det vil ser for liten ut når du ser på utformingen i stående modus (mindre bredde i forhold til høyden) - som alle mobile enheter er angitt som standard. Å løse dette problemet, bytte om vw med vh, og endre størrelsen på designet som du ser for portrettmodus. @media (orientering: portrett) .cb --w: 35vh; --h: 40vh; --b: 4vh;
