Hur man skapar en utklippsramdesign med CSS
Med en cut-out gränsen design Vi kan visa för användarna vad som finns under gränsområdet för ett HTML-element. Denna uppgift löses typiskt av staplar två eller flera blockelement (i de flesta fall div) av olika storlekar ovanpå varandra. Först verkar det som en enkel lösning, men det blir mer frustrerande när du vill återanvända layouten flera gånger, flytta runt elementen, optimera designen för mobilen eller behålla koden.
I det här inlägget kommer jag att visa dig en elegant CSS-only-lösning som använder bara ett HTML-element för att uppnå samma effekt. Denna teknik är också utmärkt för tillgänglighet, som det laddar bakgrundsbilden i CSS, skild från HTML.
I slutet av det här inlägget vet du hur du ska visa en bakgrundsbild i gränsområdet för att skapa cut-out gränsen design du kan se nedan. Jag ska också visa hur du kan göra designen responsiv använder visningsenheter.
Initial Code
Det enda kravet i HTML-fronten är a blockelement:
Vi behöver det återanvändning dimensionerna (bredd och höjd) och gränsviddsvärdena för div, så jag introducerar dem som CSS-variabler. Variabeln --w betecknar bredd av .cb blockelement, --h anger dess höjd, --b går för gränsbredd, och --b2 för gränsbredden multiplicerad med 2. Vi ser senare användningen av den senaste variabeln.
Jag sizing the Enheten Låt oss förbättra ovanstående kod genom att lägga till en bakgrund och ställa in gränsen, höjden och bredden genom att använda våra fördefinierade CSS-variabler. Så här ser demon ut att se ut just nu: Vi behöver bakgrundsbilden till täcka hela området av Om du vill ge bakgrundsbilden en fast storlek, se till att storleken du ger ger det möjlighet att täcka gränsområdet för De bredden på bakgrundsbilden [ På samma sätt, bakgrundsbildens höjd [ På så sätt har vi format bakgrundsbilden till ett område som är lika med storleken på De Notera: Om du lägger till vaddering på Så här har vi just nu: Nu när vi har täckt gränsområdet med bakgrundsbilden är allt som återstår att täcka mittområdet inom gränsen (gräns-exklusivt område) med en fast färg, för vilken vi når en Den horisontella skuggan med värde I Codepen demo kan du se en vit kant runt bilden. Det är ett känt trick av använder boxskuggor för att skapa flera gränser-vi kan använda samma teknik till lägg till en eller flera fasta färgade gränser till vår design. Den uppdaterade De I min sista Codepen-demo har jag lagt koden för bakgrundsbilden och boxskuggans färg in i en separat klass. Detta är valfri, men kan vara mycket användbart om du vill återanvänd layouten av den utklippna gränsen i flera element, och lägg till estetiken (bakgrundsbild + färg) för varje element självständigt. Jag har lagt till en klass som heter Eftersom För att ställa in värdet på Eftersom dimensionerna är alla i enheten Notera: Glöm inte att lägg till metagången för viewport till din HTML-sida om du har bestämt dig för att optimera den för mobilvisning.vw enhet (du kan använda fasta enheter om du vill). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Snabb förklaring -
vw och vh enhetervw representerar 1/100th av visningsportens bredd. Till exempel, 50vw är 50 delar av en visningsbredd skivas vertikalt i 100 lika delar, medan 50vh är 50 delar av en utsiktshöjd skivas horisontellt i 100 lika delar. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrund: url (bg.jpg); gränsen: var (- b) solid transparent; höjd: var (- h); bredd: var (- w);
Storlek bakgrundsbilden
bakgrund värde jag ger det: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrund: url (bg.jpg) centrum / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); gränsen: var (- b) solid transparent; höjd: var (- h); bredd: var (- w);
calc (var (- w) + var (- b2))] är summan av bredden av div [var (- w)] och den bredden på vänster och höger gränser [var (- b2)].calc (var (- h) + var (- b2))] är summan av höjden av div [var (- h)] och den bredden på de övre och nedre gränserna [var (- b2)].div (inklusive gränsområdet).Centrum nyckelord justerar bakgrundsbilden till centrum av div.div, kom ihåg att inkludera vadderingsområdet till bakgrundsstorleken lika bra som gränsområdet.
Täck det gränsområde exklusiva området
box-shadow infälld. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrund: url (bg.jpg) centrum / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); gränsen: var (- b) solid transparent; boxskugga: inset var (- w) 0 0 rgba (0,120,237, .5); höjd: var (- h); bredd: var (- w);
var (- w) täcker hela bredden av div. Användningen av RGBA färgfunktionen tillåter viss öppenhet att tillsättas i blandningen, men du kan också använda en ogenomskinlig färg om du vill täcka hela mittområdet helt.
Lägg till en extra kant med
box-shadowbox-shadow värdet är: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrund: url (bg.jpg) centrum / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); gränsen: var (- b) solid transparent; boxskugga: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) vit; höjd: var (- h); bredd: var (- w);
calc (var (- b) / 2) funktion skapar en skugga av halva gränsen bredden.
Valfritt: Separat layout och estetik
.poster1 till .poster1 - tbgc: rgba (0,120,237, .5); bakgrundsbild: url ("http://bit.ly/2eQBij2"); bakgrund är en stenografi egendom, dess longhand egenskaper kan överskridas / ställas individuellt. Därför kan vi ställa in bakgrundsbild i .poster1, och ta bort url-värdet från bakgrund egendom i .cb.box-shadow, vi kan använda en annan CSS-variabel. De --tbgc variabel håller färgvärdet vi vill ge till boxskuggan (ljusblå i demoen), så bland stilreglerna för .cb vi ersätt färgvärdet för box-shadow egendom med var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); bakgrund: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); gränsen: var (- b) solid transparent; boxskugga: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) vit; höjd: var (- h); bredd: var (- w);
Kod för stående läge
vw, Det kommer ser för liten ut när du tittar på designen i stående läge (mindre bredd i förhållande till höjden) - som alla mobila enheter är som standard. Att lösa detta problem, växla vw med vh, och ändra storlek på designen som du passar för porträttlägen. @media (orientering: porträtt) .cb --w: 35vh; --h: 40vh; -b: 4vh;
