Sådan opretter du en udskåret kantdesign med CSS
Med en udskåret kantdesign Vi kan vise til brugere, hvad der kan findes under grænseområdet af et HTML-element. Denne opgave løses typisk af stabling af to eller flere blokelementer (i de fleste tilfælde divs) af forskellige størrelser oven på hinanden. For det første virker det som en ubesværet løsning, men det bliver mere frustrerende, når du vil genbruge layoutet flere gange, flytte rundt om elementerne, optimere designet til mobil eller vedligeholde koden.
I dette indlæg vil jeg vise dig en elegant CSS-only-løsning, der bruger kun ét HTML element for at opnå samme effekt. Denne teknik er også stor for tilgængelighed, som det Indlæser baggrundsbilledet i CSS'en, adskilt fra HTML'en.
Ved udgangen af dette indlæg vil du vide hvordan du skal vis et baggrundsbillede i grænseområdet for at skabe udskåret kantdesign du kan se nedenfor. Jeg vil også vise, hvordan du kan gøre designet lydhørt ved hjælp af viewport-enheder.
Indledende kode
Det eneste krav i HTML-fronten er a blokelement:
Det bliver vi nødt til genbruge dimensionerne (bredde og højde) og grænsebreddsværdier for div, så jeg introducerer dem som CSS variabler. Variabelen --w betegner bredde af .cb blokelement, --h angiver dens højde, --b går til grænsebredde, og --b2 for grænsebredden ganget med 2. Vi ser senere brugen af den sidste variabel.
Jeg er dimensionering af Enheden Lad os forbedre ovenstående kode ved at tilføje en baggrund og indstille grænsen, højden og bredden ved at bruge vores foruddefinerede CSS variabler. Sådan ser demoen ud til at ligne lige nu: Vi har brug for baggrundsbilledet til dække hele området af Hvis du vil give baggrundsbilledet en fast størrelse, skal du bare sørge for, at den størrelse, du giver, gør det muligt at dække grænsen på Det bredden af baggrundsbilledet [ Tilsvarende højden af baggrundsbilledet [ På den måde har vi dimensioneret baggrundsbilledet til et område, der er det samme som størrelsen af Det Bemærk: Hvis du tilføjer padding til Det er det, vi har lige nu: Nu hvor vi har dækket det grænseomfattende område med baggrundsbilledet, er alt det, der er tilbage til dække midterområdet inden for grænsen (grænse eksklusivt område) med en solid farve, som vi når til en Den vandrette skygge med værdi I Codepen-demoen kan du se en hvid ramme omkring billedet. Der er et berømt trick af bruger bokseskygger til at skabe flere grænser-vi kan bruge den samme teknik til Tilføj en eller flere faste farvede grænser til vores design. Den opdaterede Det I min sidste Codepen-demo har jeg lagt koden til baggrundsbilledet og boksskyggens farve ind i en særskilt klasse. Dette er valgfri, men kan være yderst nyttigt, hvis du vil genbruge layoutet af det udskårne grænse design i flere elementer, og tilføj æstetik (baggrundsbillede + farve) for hvert element uafhængigt. Jeg har tilføjet en klasse med navnet Siden For at indstille værdien af Da dimensionerne er alle i enheden Bemærk: Glem ikke at Tilføj visnings-metataggen til din HTML-side, hvis du har besluttet at optimere den til mobilvisning.vw enhed (du kan bruge faste enheder, hvis du vil). .cb --w: 35vw; - h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Hurtig forklaring -
vw og vh enhedervw repræsenterer 1/100th af visningsportens bredde. For eksempel, 50vw er 50 dele af en visningsbredde skåret lodret i 100 lige dele, mens 50vh er 50 dele af en udsynshøjde skåret horisontalt i 100 lige dele. .cb --w: 35vw; - h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); baggrund: url (bg.jpg); grænse: var (- b) solid gennemsigtig; højde: var (- h); bredde: var (- w);
Størr baggrundsbilledet
baggrund værdi jeg giver det: .cb --w: 35vw; - h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); baggrund: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); grænse: var (- b) solid gennemsigtig; højde: var (- h); bredde: var (- w);
calc (var (- w) + var (- b2))] er summen af bredden af div [var (- w)] og bredden af venstre og højre kant [var (- b2)].calc (var (- h) + var (- b2))] er summen af højden af div [var (- h)] og bredden af de øverste og nederste grænser [var (- b2)].div (herunder grænseregionen).centrum søgeord justerer baggrundsbilledet til centrum af div.div, Husk at omfatter polstring området til baggrundsstørrelsen også, det samme som grænserområdet.
Dæk det grænser eksklusive område
box-shadow nedfældning. .cb --w: 35vw; - h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); baggrund: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); grænse: var (- b) solid gennemsigtig; boksskygge: indsæt var (- w) 0 0 rgba (0,120,237, .5); højde: var (- h); bredde: var (- w);
var (- w) dækker hele bredden af div. Brugen af RGBA farvefunktion tillader det lidt gennemsigtighed der skal tilsættes i blandingen, men du kan også bruge en uigennemsigtig farve, hvis du vil dække hele området helt.
Tilføj en ekstra grænse med
box-shadowbox-shadow værdien er: .cb --w: 35vw; - h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); baggrund: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); grænse: var (- b) solid gennemsigtig; boksskygge: indsæt var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) hvid; højde: var (- h); bredde: var (- w);
calc (var (- b) / 2) funktion skaber en skygge af halvdelen af grænsebredden.
Valgfrit: Separat layout og æstetik
.poster1 til .poster1 - tbgc: rgba (0,120,237, .5); baggrundsbillede: url ("http://bit.ly/2eQBij2"); baggrund er en stenografi ejendom, dets longhand egenskaber kan overstyres / indstilles individuelt. Derfor kan vi sætte baggrundsbillede i .poster1, og fjern urlværdien fra baggrund ejendom i .cb.box-shadow, vi kan bruge en anden CSS-variabel. Det --tbgc variabel holder farveværdien vi vil give til bokseskyggen (lyseblå i demoen), så blandt stilreglerne for .cb vi erstat farveværdien af box-shadow ejendom med var (- tbgc). .cb --w: 35vw; - h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); baggrund: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); grænse: var (- b) solid gennemsigtig; boksskygge: indsæt var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) hvid; højde: var (- h); bredde: var (- w);
Kode til portrætstilstand
vw, det vil ser for lille ud når du ser designet i portrættilstand (mindre bredde i forhold til højden) - som alle mobile enheder er standardindstillet til. At løse dette problem, kontakt vw med vh, og ændre størrelsen på designet som du finder egnet til portrætstilstande. @media (orientering: portræt) .cb --w: 35vh; - h: 40vh; - b: 4vh;
