Hoe maak je een Cut-out Border Design met CSS
Met een ontwerp met uitgesneden randen we kunnen aan gebruikers laten zien wat er te vinden is onder het randgebied van een HTML-element. Deze taak wordt meestal opgelost door het stapelen van twee of meer blokelementen (in de meeste gevallen divs) van verschillende grootte boven op elkaar. Allereerst lijkt dit een moeiteloze oplossing, maar het wordt nog frustrerender als je de lay-out meerdere keren wilt hergebruiken, rond de elementen wilt bewegen, het ontwerp voor mobiel wilt optimaliseren of de code wilt behouden.
In deze post laat ik je een elegante CSS-only oplossing zien die gebruikt slechts één HTML-element om hetzelfde effect te bereiken. Deze techniek is ook geweldig voor toegankelijkheid, zoals het laadt de achtergrondafbeelding in de CSS, gescheiden van de HTML.
Aan het einde van dit bericht weet je hoe een achtergrondafbeelding weergeven in het grensgebied om het te maken ontwerp met uitgesneden randen je ziet het hieronder. Ik zal ook laten zien hoe je het ontwerp responsive kunt maken met behulp van viewport-eenheden.
Initiële code
De enige vereiste op het HTML-front is a blokelement:
We zullen het moeten doen hergebruik de afmetingen (breedte & hoogte) en grensbreedte van de div, dus ik introduceer ze als CSS-variabelen. De variabele --w staat voor de breedte van de .cb blokelement, --h geeft het aan hoogte, --b gaat voor de grensbreedte, en --b2 voor de grensbreedte vermenigvuldigd met 2. We zullen later het gebruik van de laatste variabele zien.
Ik verklein de De eenheid Laten we de bovenstaande code verbeteren door een achtergrond toe te voegen en de rand, hoogte en breedte in te stellen door onze vooraf gedefinieerde CSS-variabelen te gebruiken. Hier is hoe de demo er op dit moment uitziet: We hebben de achtergrondafbeelding nodig om bestrijk het hele gebied van de Als je de achtergrondafbeelding een vaste grootte wilt geven, zorg er dan voor dat het formaat dat je geeft het mogelijk maakt om het randgebied van de achtergrond af te dekken De breedte van de achtergrondafbeelding [ Evenzo, de hoogte van de achtergrondafbeelding [ Op deze manier hebben we de achtergrondafbeelding aangepast aan een gebied dat hetzelfde is als het formaat De Notitie: Als u opvulling toevoegt aan de Dit is wat we nu hebben: Nu we het grens omvattende gebied hebben bedekt met de achtergrondafbeelding, is het enige dat overblijft bedek het middengebied binnen de rand (grens exclusief gebied) met een effen kleur, waarvoor we reiken naar een De horizontale schaduw met waarde In de demo van Codepen kon je een witte rand rond de afbeelding zien. Er is een beroemde truc van met behulp van vakschaduwen om meerdere randen te maken-we kunnen dezelfde techniek gebruiken om voeg een of meer effen gekleurde randen toe naar ons ontwerp. De bijgewerkte De In mijn definitieve Codepen-demo heb ik de code voor de achtergrondafbeelding en de doosschaduwkleur geplaatst in een aparte klas. Dit is facultatief, maar kan erg handig zijn als je dat wilt hergebruik de lay-out van het ontwerp met de uitgesneden randen in meerdere elementen en voeg de esthetiek (achtergrondafbeelding + kleur) voor elk element afzonderlijk toe. Ik heb een klasse met de naam toegevoegd Sinds Om de waarde van de in te stellen Omdat de dimensies allemaal in de eenheid zitten Notitie: Vergeet het niet voeg de metatag van de viewport toe naar uw HTML-pagina als u heeft besloten om deze voor mobiele weergave te optimaliseren.vw eenheid (u kunt vaste eenheden gebruiken als u dat wilt). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2);
Snelle uitleg -
vw en vh unitsvw vertegenwoordigt de 1/100th van de breedte van de viewport. Bijvoorbeeld, 50vw is 50 delen van een viewport-breedte verticaal in 100 gelijke delen gesneden, terwijl 50vh is 50 delen van een kijkvensterhoogte horizontaal in 100 gelijke delen gesneden. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); achtergrond: url (bg.jpg); rand: var (- b) vast transparant; hoogte: var (- h); breedte: var (- w);
Bepaal de achtergrondafbeelding
achtergrond waarde die ik het geef: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); achtergrond: url (bg.jpg) centrum / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); rand: var (- b) vast transparant; hoogte: var (- h); breedte: var (- w);
calc (var (- w) + var (- b2))] is de som van de breedte van de div [var (- s)] en de breedte van de linker en rechter randen [var (- b2)].calc (var (- h) + var (- b2))] is de som van de hoogte van de div [var (- h)] en de breedte van de boven- en onderranden [var (- b2)].div (inclusief het grensgebied).centrum trefwoord lijnt de achtergrondafbeelding uit naar het midden van de div.div, Onthoud om inclusief het opvulgebied ook naar de achtergrondgrootte, hetzelfde als het randgebied.
Bedek het exclusieve gebied aan de rand
box-shadow inzet. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); achtergrond: url (bg.jpg) centrum / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); rand: var (- b) vast transparant; vakschaduw: inzet var (- w) 0 0 rgba (0,120,237, .5); hoogte: var (- h); breedte: var (- w);
var (- s) bestrijkt de volledige breedte van de div. Het gebruik van RGBA kleurfunctie maakt het mogelijk enige transparantie om in de mix te worden toegevoegd, maar u kunt ook een dekkende kleur gebruiken als u het middengebied volledig wilt bedekken.
Voeg een extra rand toe met
box-shadowbox-shadow waarde is: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); achtergrond: url (bg.jpg) centrum / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); rand: var (- b) vast transparant; box-shadow: inzet var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) wit; hoogte: var (- h); breedte: var (- w);
calc (var (- b) / 2) functie maakt een schaduw van de de helft van de randbreedte.
Optioneel: aparte lay-out en esthetiek
.poster1 naar de .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); achtergrond is een verkorte eigenschap, zijn eigenschappen met de lange hand kunnen worden overschreven / afzonderlijk worden ingesteld. Vandaar dat we kunnen instellen achtergrond afbeelding in .poster1, en verwijder de urlwaarde van de achtergrond eigendom in .cb.box-shadow, we kunnen gebruiken een andere CSS-variabele. De --tbgc veranderlijk houdt de kleurwaarde vast we willen geven aan de doosschaduw (lichtblauw in de demo), dus een van de stijlregels voor .cb wij vervang de kleurwaarde van de box-shadow eigendom met var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); achtergrond: centrum / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); rand: var (- b) vast transparant; vakschaduw: inzet var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) wit; hoogte: var (- h); breedte: var (- w);
Code voor portretmodus
vw, het zal ziet er te klein uit wanneer u het ontwerp bekijkt in de staande modus (kleinere breedte ten opzichte van de hoogte), waarbij alle mobiele apparaten standaard zijn ingeschakeld. Om dit probleem op te lossen, schakelaar vw met vh, en verklein het ontwerp zoals je ziet voor portretten. @media (oriëntatie: portret) .cb --w: 35vh; --h: 40vh; --b: 4vh;
