De auteur heeft het Diversity in Tech Fund geselecteerd om een donatie te ontvangen als onderdeel van het Write for DOnations-programma.
Introductie
Het werken met schaduwen, randen en outlines is een essentieel onderdeel van webontwikkeling en kan visuele definitie bieden rond HTML-elementen en tekstitems. Het uiterlijk van randen en schaduwen kan worden gemanipuleerd via vijf belangrijke CSS-eigenschappen: border, border-radius, box-shadow, text-shadow en outline. Schaduwen bieden diepte en helpen elementen op te laten vallen, terwijl de border-eigenschappen veel verschillende visuele functies kunnen vervullen, van het creëren van een lineaire scheider tussen inhoud tot het definiëren van de ruimte van een raster. De border-radius-eigenschap creëert afgeronde hoeken op vakken en kan zelfs een cirkelvormige vorm maken. Ten slotte is outline een vaak over het hoofd gezien eigenschap die veel van dezelfde functionaliteit biedt als de border-eigenschap zonder de inhoudsstroom te verstoren.
In deze tutorial ga je met deze eigenschappen werken om een juridische kennisgeving te creëren voor een fictief ruimtetoerismebedrijf. Gedurende de demo maak je visueel rijke containers door gebruik te maken van randgebaseerde eigenschappen. Daarnaast houd je rekening met de nuances over complexere waarden, zoals meerdere schaduwen en hoe verschillende browsers bepaalde eigenschappen anders kunnen implementeren.
Vereisten
- Een begrip van CSS’s cascade en specificiteit functies, die je kunt krijgen door het lezen van Hoe CSS-stijlen toe te passen op HTML met cascade en specificiteit.
- Kennis van type selectors, combinator selectors, en selector groups, die je kunt vinden in Hoe HTML-elementen te selecteren om te stylen met CSS.
- Begrip van
coloreigenschappen in CSS. Zie Hoe kleurwaarden te gebruiken met CSS om meer te leren. - Kennis van CSS-gradients met de
backgroundeigenschappen. Bekijk Hoe achtergrondstijlen toe te passen op HTML-elementen met CSS om ervaring op te doen met het maken van graduele achtergronden. - Een leeg HTML-bestand opgeslagen op uw lokale machine als
index.html, dat u kunt openen vanuit uw teksteditor en webbrowser naar keuze. Om te beginnen, bekijk onze Hoe u uw HTML-project instelt handleiding en volg Hoe u HTML-elementen gebruikt en begrijpt voor instructies over hoe u uw HTML in uw browser kunt bekijken. Als u nieuw bent met HTML, probeer dan de hele Hoe u een website bouwt in HTML serie.
Het opzetten van de basis HTML en CSS
In dit gedeelte zult u de HTML-basis opzetten voor alle visuele stijlen die u gedurende de handleiding zult schrijven. U zult ook uw styles.css bestand maken en stijlen toevoegen die de lay-out van de inhoud bepalen.
Begin door index.html te openen in uw teksteditor. Voeg vervolgens de volgende HTML toe aan het bestand:
Er zijn veel paginainstellingen gedefinieerd binnen het <head>-element. Het eerste <meta>-element definieert de te gebruiken tekenset voor de tekst. Op deze manier worden de meeste speciale tekens, zoals accenttekens, weergegeven zonder speciale HTML-codes. Het tweede <meta>-element vertelt browsers, en met name mobiele browsers, hoe de breedte van de inhoud moet worden behandeld; anders simuleert de browser een desktopbreedte van 960px. Het <title>-element geeft de browser de titel van de pagina. Het <link>-element laadt het CSS-bestand waarin je je stijlen zult schrijven gedurende deze tutorial.
De pagina heeft ook inhoud nodig om te stylen. Voor de wettelijke tekst zul je voorbeeldinhoud gebruiken van Legal Ipsum als opvulmateriaal, uitsluitend bedoeld voor stylingdoeleinden.
Keer terug naar index.html in je teksteditor en voeg de gemarkeerde HTML toe uit de volgende codeblok:
Sla je wijzigingen op in index.html en open vervolgens je webbrowser. Selecteer het Bestand-menu-item en selecteer vervolgens de optie Openen en laad je index.html-bestand in de browser. De volgende afbeelding laat zien hoe deze HTML wordt weergegeven in de browser:
Maak een nieuw bestand genaamd styles.css in dezelfde map als index.html, open het vervolgens in je teksteditor. Dit bestand bevat alle stijlen die gebruikt worden gedurende de tutorial. De eerste set stijlen zal een algemene esthetiek toepassen waar je vanaf zult bouwen. Pas de CSS toe uit het volgende codeblok op je styles.css-bestand:
De opmaak in dit bestand bepaalt de initiële lay-out van de pagina, met een gecentreerde juridische disclaimer, knoppen met tussenruimte en weergegeven met een lineair verloop, en een afbeelding van de maan als achtergrond. Voordat u verder gaat, zorg ervoor dat u het bestand styles.css opslaat.
Om de afbeelding weer te geven die is gekoppeld in de background-eigenschap van de body-regelset, heeft u de Maanachtergrondafbeelding nodig. Maak eerst een images-map in dezelfde map als uw index.html-bestand:
Gebruik uw browser om dit bestand te downloaden naar uw nieuw aangemaakte images-map, of gebruik de volgende curl-opdracht om het via de opdrachtregel te downloaden:
Vervolgens keert u terug naar uw browser en vernieuwt u deze. De browser zal nu de stijlen renderen en toepassen op de inhoud van de pagina. De volgende afbeelding laat zien hoe de volledige pagina wordt weergegeven:
De lengte van de inhoud zorgt voor een zeer lange pagina. Aangezien dit bedoeld is als juridische tekst, kan de inhoud van .legal-contents een scrollbare ruimte worden. Dit wordt gedaan door middel van een combinatie van de eigenschappen height, max-height en overflow.
Om een scrollbare ruimte te maken, opent u styles.css in uw teksteditor. Pas vervolgens de hoogte van de juridische inhoud aan met de volgende code:
In deze code heb je een height-eigenschap aangemaakt in het .legal-contents selectieblok, vervolgens de waarde ingesteld op 50vh, wat 50% van de hoogte van het viewport-venster betekent. Je hebt ook een max-height-eigenschap aangemaakt met de waarde ingesteld op 20rem. Ten slotte heb je een overflow-eigenschap toegevoegd met de waarde auto, wat een schuifbalk creëert als de inhoud de container overschrijdt.
Sla deze toevoegingen op in je styles.css bestand, ga vervolgens terug naar je browser en vernieuw index.html. De volledige hoogte van de pagina en de hoofdcontainer is nu ingekort. Nu kan de Legal Ipsum-tekst worden gescrold binnen zijn aangewezen container, zoals geïllustreerd in de volgende animatie:
Gedurende deze sectie heb je de primaire HTML opgezet die je voor de rest van de tutorial zult gebruiken. Je hebt ook een scrollbare ruimte opgezet met behulp van de overflow-eigenschap. In de volgende sectie ga je werken met de border-eigenschap om een rand toe te passen op deze containers.
Het gebruik van de border-eigenschap
De eigenschap border is een van de originele manieren om stijlen toe te passen op de randen van elementen. Het past een lijn in elke kleur toe op de buitenste omtrek van een container. De waarde van de eigenschap bestaat uit drie componenten: de dikte, de stijl en de kleur. De eigenschap border past deze waarden toe op alle vier de zijden van een element. U kunt individuele zijden specificeren met de richtingsvariaties van border, zoals de eigenschap border-top, die alleen op de bovenkant van een element wordt toegepast.
Om te beginnen met werken met de border-eigenschap, opent u styles.css in uw teksteditor en gaat u naar de .disclosure-alert klassenselector. Voeg binnen het selectorblok een border-eigenschap toe met een waarde ingesteld op 1px solid hsl(0, 0%, 0%), zoals aangegeven in het volgende codeblok:
Deze border-eigenschap is een shorthand-eigenschap, wat betekent dat de waarde een combinatie is van andere waarden. In dit geval vertegenwoordigt de dikte van 1px de waarde van de border-width-eigenschap. Deze waarde kan elk numerieke waarde met een eenheid zijn, samen met een paar genoemde waarden: thin, medium en thick. Vervolgens is solid de waarde van border-style, die definieert hoe de lijn rond het element zal verschijnen, in dit geval als een solide, continue lijn. Andere waarden voor border-style zijn dotted, dashed, double en none. De laatste waarde definieert de border-color-eigenschap, die elke geldige kleurwaarde kan zijn.
Sla uw wijzigingen op in styles.css, open vervolgens index.html in een webbrowser. Het primaire inhoudscontainer krijgt nu een dunne zwarte rand, die het duidelijkst te zien is doordat het zich over de maanachtergrondafbeelding bevindt. De volgende afbeelding toont hoe de rand verschijnt op het hoofdinhoudsgebied:
Vervolgens kunt u de rand-eigenschap gebruiken om een gevoel van diepte te creëren door hooglichten en schaduwen toe te passen op een element. Dit kunt u bereiken door een richtingsbepalende rand aan één kant te gebruiken die lichter is dan de achtergrondkleur, gevolgd door een donkerdere kleur aan de aangrenzende kant.
Ga terug naar styles.css in uw teksteditor, ga dan naar het klasseselectorblok .disclosure-header. De linear-gradient() op de achtergrond-eigenschap definieert een donkerpaarse gradiënt die overgaat in een iets donkerdere tint. Om meer diepte te creëren dan alleen de gradiënt, pas de rand aan met de volgende code:
U hebt een rand-boven-eigenschap toegevoegd met een waarde van 1px massief hsl(300, 50%, 35%), die iets lichter is dan de startwaarde van de gradiënt. Vervolgens hebt u een rand-onder-eigenschap gemaakt met een waarde van 1px massief hsl(300, 50%, 5%), die iets donkerder is dan het einde van de gradiënt.
Sla uw wijzigingen op in styles.css, keer vervolgens terug naar de browser en vernieuw index.html. De paarse koptekstachtergrond heeft nu een lichte paarse highlight aan de bovenkant van de koptekst en een lichte schaduw aan de onderkant. De volgende afbeelding toont hoe dit in de browser zal verschijnen:
Aangezien border een samenvoegende eigenschap is, kunt u aanvullende uitgebreide eigenschappen toevoegen. Een border kan worden toegepast die de breedte en de stijl van de twee knopklassen definieert, terwijl een border-color kan worden toegepast op de afzonderlijke klassen.
Om te beginnen met werken met border-color, opent u styles.css in uw teksteditor. Voeg in het selectieblok voor .button een border-eigenschap toe met een waarde van 1px solid, voeg vervolgens een border-color-eigenschap toe voor .button-primary en .button-secondary:
Dit definieert een 1px breedte solid stijl rand voor beide knoppen. Vervolgens voegde u een border-color-eigenschap toe om de kleuren aan te passen voor de .button-primary, .button-secondary, en hun bijbehorende :hover staat selectoren.
Sla deze wijzigingen op in styles.css, vernieuw vervolgens de pagina in uw webbrowser. Zoals te zien is in de volgende afbeelding, hebben de knoppen nu iets meer definitie dankzij een overeenkomende donkerdere kleur rand:
Tenslotte is elke border-richting ook een samenvoegende eigenschap. Dit betekent dat -width, -style, en -color elk kunnen worden toegepast op een richtingeigenschap. Bijvoorbeeld, de uitgebreide eigenschap border-right-color zal alleen een kleur toepassen op de rechterzijde rand.
Om te werken met deze directionele longhand border-eigenschappen, ga terug naar styles.css in je teksteditor. Ga naar het .legal-contents-selectieblok en stel de breedte en stijl in voor alle vier de borderzijden, en pas vervolgens de kleuren van elke zijde aan:
In deze code heb je border: 1px solid toegevoegd aan het einde van het bestand. Daarna heb je ook de eigenschappen border-top-color, border-bottom-color, border-right-color en border-left-color aangemaakt. Voor de waarden heb je verschillende hsl()-waarden voor grijstinten gebruikt.
Sla je wijzigingen op in styles.css, en vernieuw vervolgens de pagina in de browser. De scrollbare inhoudscontainer heeft nu een donkergrijze rand aan de bovenkant, een iets lichtere grijze aan de zijkanten, en een witte rand aan de onderkant. Dit is om de perceptie te geven dat de inhoud ingezet is achter de lichtgrijze achtergrond, wat een effect veroorzaakt waarbij de highlight aan de onderkant is, zoals te zien in de volgende afbeelding:
In deze sectie heb je de border-eigenschap en zijn verschillende longhand variaties gebruikt. Je hebt verschillende randen gemaakt die werden toegepast op verschillende zijden zoals nodig was. In de volgende sectie ga je werken met de border-radius-eigenschap, die zorgt voor afgeronde hoeken van containers.
Het toepassen van een border-radius
Afgeronde hoeken waren al lang een ontwerpesthetiek op het web voordat de border-radius-eigenschap bestond om de taak uit te voeren. Deze eigenschap kan elke numerieke eenheid of percentage waarde accepteren en is een shorthand-eigenschap zoals de margin– of padding-eigenschappen. Dit betekent dat elke hoek individueel kan worden aangepast indien nodig.
Om te beginnen met werken met de border-radius-eigenschap, open styles.css in je teksteditor. Ga naar het .disclosure-alert-selectieblok en de border-radius-eigenschap. Stel vervolgens de waarde in op 1.5rem, wat die waarde zal toepassen op alle vier de hoeken van de eigenschap. De gemarkeerde CSS in het volgende codeblok laat zien hoe dit is geschreven:
Sla deze toevoeging op in styles.css en open of vernieuw vervolgens index.html in een webbrowser. Alleen de onderste twee hoeken zullen afgerond lijken, terwijl de bovenste twee puntige randen zullen blijven. De volgende afbeelding illustreert hoe dit wordt weergegeven in de browser:
De reden waarom slechts twee afgeronde hoeken zichtbaar zijn, heeft te maken met hoe onderliggende elementen met elkaar interageren op het web. De browser geeft er de voorkeur aan om inhoud zichtbaar te houden. De .disclosure-alert heeft weliswaar vier afgeronde hoeken, maar omdat .disclosure-header zich binnen het element bevindt en geen afgeronde hoeken heeft, overlapt het de afgeronde hoeken. Een snelle oplossing is om overflow: hidden toe te voegen aan .disclosure-alert, waardoor de container eventuele onderliggende containers en inhoud inkort. Deze aanpak kan echter leiden tot noodzakelijke inhoud die onleesbaar of onzichtbaar wordt. Een betere praktijk is om een border-radius toe te passen op de .disclosure-header klasse om de kromming van de hoek van zijn voorouder overeen te laten komen.
Om de overlappende hoeken aan te passen, ga terug naar styles.css in je teksteditor. Ga naar het selectieblok van .disclosure-header en voeg de border-radius eigenschap toe. Omdat alleen de bovenste twee hoeken moeten worden aangepast, zal de waarde 1.5rem 1.5rem 0 0 zijn:
De uitgebreide indeling van deze waarde zal een 1.5rem kromming toepassen op de linkerbovenhoek en rechterbovenhoek.
Sla je wijzigingen op in styles.css en vernieuw index.html in de browser. De paarse header heeft nu een afgeronde hoek en bedekt de hoofdcontainer niet. Er is echter een nieuw probleem opgedoken, omdat er een witte spleet vanuit de oudercontainer te zien is die achter de paarse header uitsteekt, zoals te zien is in de volgende ingezoomde afbeelding:
De hoeken voor zowel de .disclosure-alert als de .disclosure-header zijn dezelfde grootte van 1.5rem, maar hun breedtes hebben een verschil in grootte. Dit grootteverschil wordt veroorzaakt door de border aan de linker- en rechterkant van het .disclosure-alert-element. Aangezien de breedte van de border aan beide zijden 1px is, bedraagt het grootteverschil 2px of 0.125rem. Om de bochten overeen te laten komen, moet de border-radius voor .disclosure-header 0.125rem kleiner zijn dan het momenteel is. Wijzig de border-radius-waarden van 1.5rem naar 1.375rem, zoals aangegeven in onderstaande codeblok:
Sla deze wijziging op in styles.css en vernieuw vervolgens de pagina in de webbrowser. Het dunne witte streepje is nu verdwenen en de bochten van de twee elementen komen op de juiste plek samen. De volgende ingezoomde schermafbeelding laat zien hoe deze bochten op elkaar aansluiten:
Tenslotte zal je afgeronde hoeken toepassen op de knoppen onderaan de hoofdcontainer. Deze knoppen zullen een pilvorm hebben, met een lange, platte boven- en onderkant en volledig afgeronde zijkanten. Om dit te bereiken, moet de border-radius-waarde een eenheidsgebaseerde waarde zijn die groter is dan de hoogte van het element.
Om een knop in de vorm van een pil te maken, opent u styles.css in uw teksteditor. Voeg in het .button-selectorblok de eigenschap border-radius toe en stel de waarde vervolgens in op 2rem. Dit kan een willekeurig getal zijn, zolang het maar groter is dan de berekende hoogte, de combinatie van de font-size, line-height, padding en border-width die de algehele hoogte van een element kunnen beïnvloeden. De gemarkeerde CSS in het volgende codeblok laat zien waar deze eigenschap moet worden toegevoegd:
Er zijn twee dingen om op te merken over deze aanpak. Het eerste is dat er geen height-waarde is ingesteld voor dit element. Het instellen van een height-waarde moet worden vermeden omdat de inhoud buiten de container kan komen te staan. Door geen height in te stellen, kan de knop groeien om overeen te komen met de totale inhoud. Het tweede is dat dit niet correct zal werken met een waarde gebaseerd op procenten. Op procenten gebaseerde waarden op een border-radius-eigenschap buigen een percentage van de hoogte en de breedte, waardoor een ovaalvormige vorm ontstaat in plaats van een afgeronde hoek.
Sla uw wijzigingen op in styles.css, keer dan terug naar de browser en vernieuw index.html. De pagina zal nu twee langwerpige, pilvormige knoppen weergeven, zoals te zien is in de volgende afbeelding:
In deze sectie hebt u de border-radius-eigenschap gebruikt om afgeronde hoeken toe te passen op meerdere elementen, waarbij u ontdekte dat een border-radius niet voorkomt dat afhankelijke elementen de gebogen ruimte verlaten. U hebt ook de waarde van een border-radius aangepast om overeen te komen met de breedte van een element wanneer meerdere afgeronde elementen boven op elkaar zijn geplaatst. In de volgende sectie zult u de text-shadow-eigenschap gebruiken om schaduwen toe te passen op tekstinhoud.
Het Gebruik van de text-shadow-Eigenschap
Het toepassen van schaduwen op tekst heeft vele toepassingen in de dagelijkse webontwikkeling. Schaduwen kunnen diepte creëren, een gloeiend effect hebben, of tekst laten opvallen op plaatsen waar deze over het hoofd gezien kan worden. In deze sectie gaat u de text-shadow-eigenschap toepassen op meerdere elementen om verschillende visuele effecten te creëren.
De text-shadow-eigenschap bestaat uit maximaal vier waarden: x-as offset, y-as offset, vervagingsstraal en kleur. Als voorbeeld kunnen de waarden er als volgt uitzien: 2px 4px 10px rood. Van deze vier waarden zijn alleen de offsetwaarden vereist. De schaduwkleur is standaard de kleur van de tekst.
Om te beginnen met werken met text-shadow, begint u met het maken van een gloeiend effect op de koptekst. Open styles.css in uw teksteditor en ga naar de klasse-selector .disclosure-header. Voeg binnen de selectieblok de volgende text-shadow-eigenschap toe:
A glow effect means the color will emanate from every edge of the text, so the x- and y-axis offset values here are set to 0. You set the blur for the glow to 0.375rem (equivalent to 6px) to give a subtle halo of color to the text. Lastly, the color value was set to a bit darker than the color property: hsl(300, 50%, 50%).
Voeg deze toevoeging toe aan je styles.css bestand. Open vervolgens index.html in een webbrowser. De vetgedrukte kop tekst op de paarse gegradeerde achtergrond heeft nu een gloed van een middelmatig paars eromheen. De volgende afbeelding illustreert hoe dit effect wordt weergegeven in de browser:
Daarna kunnen meerdere schaduwen worden geplaatst op tekst elementen, waardoor een reliëf effect op tekst kan worden gecreëerd. Dit effect wordt bereikt door een lichtgekleurde schaduw onder het object te plaatsen en een donkergekleurde schaduw erboven.
Om een reliëf effect te creëren, ga terug naar styles.css in je teksteditor. Het effect zal worden toegevoegd aan de knoppen onderaan de container. Voor de selecteurs .button-primary, .button-primary:hover, .button-secondary en .button-secondary:hover, voeg een text-shadow eigenschap toe. Bekijk de gemarkeerde CSS in de volgende codeblok voor de waarden:
De eerste schaduw is een lichtere ingezette onderste highlight. Dit wordt gedaan met de 0 1px offset, vervolgens de lichtere versie van de achtergrondgradiënt tinten. Vervolgens maakte je de schaduw boven de tekst met een 0 -1px offset, die de schaduw 1px omhoog trekt en een donkerdere variatie van de achtergrondkleuren gebruikt.
Sla deze wijzigingen op in styles.css, vernieuw dan de pagina in je webbrowser. De tekst binnen de knoppen heeft nu een lichte highlight onder de tekst en een lichte schaduw boven de tekst. De combinatie van deze text-shadow waarden creëert het reliëf effect zoals weergegeven in de volgende afbeelding:
In deze sectie heb je de text-shadow eigenschap toegepast op een paar elementen. Je hebt een gloei-effect op de kop en een reliëfeffect met meerdere schaduwen op de knoppen gecreëerd. In de volgende sectie pas je schaduwen toe op HTML-elementen met behulp van de box-shadow eigenschap.
Het Toevoegen van box-shadow aan Elementen
Net zoals de text-shadow eigenschap schaduwen toelaat op tekstinhoud, laat de box-shadow eigenschap toe om schaduwen op elementen en containers toe te passen. De box-shadow heeft twee extra functies die je in deze sectie zult verkennen, inclusief de mogelijkheid om de vervaging te beheersen en de schaduw binnen het element in te stellen.
Om te beginnen met het werken met de box-shadow eigenschap, open je styles.css in je teksteditor. In het selectorblok .disclosure-alert, voeg de box-shadow eigenschap toe. Net zoals bij de text-shadow, zijn de offsetwaarden op de x- en y-as vereist, en als er geen kleur is opgegeven, wordt de waarde van de color eigenschap gebruikt. Voor deze eerste box-shadow, stel de offsets in op 0, de vervaging op 0.5rem, en de kleur op een donker hsl(300, 40%, 5%), zoals aangegeven in het volgende codeblok:
Sla de wijzigingen op in styles.css en vernieuw de pagina in je webbrowser. Er is nu een bijna zwarte schaduw die zich verspreidt vanuit de container. Let ook op dat de schaduw de rondingen respecteert en volgt die je hebt gecreëerd met de border-radius eigenschap. De volgende afbeelding toont hoe dit wordt weergegeven in de browser:
Keer vervolgens terug naar styles.css en begin een complexer effect te creëren door twee extra grote gloei-effecten toe te voegen aan de box-shadow. Voeg een komma toe tussen elke nieuwe schaduw, stel elk in om een y-as-offset te hebben van 0.5rem. Stel vervolgens grote vervagingen in en gebruik lichtere variaties van het blauw en paars uit het kleurenpalet, zoals aangegeven in het volgende codeblok:
De volgorde van deze schaduwen is belangrijk. De eerste schaduw met de bijna zwarte kleur wordt boven de nieuwe schaduwen weergegeven, en elke volgende schaduw wordt achter de volgende toegevoegd.
Sla je wijzigingen op in styles.css en vernieuw de pagina in je webbrowser. Zoals geïllustreerd in de volgende afbeelding, zorgt de combinatie van meerdere schaduwen voor een uniek effect:
De vervagingsfunctie van de box-shadow-eigenschap kan worden gebruikt om een gevoel van diepte te creëren. De vervagingswaarde accepteert zowel positieve als negatieve waarden. Een negatieve vervagingswaarde gecombineerd met een sterke offset en vervaging creëert een schaduw die ver weg en ver van de broncontainer lijkt.
Keer terug naar styles.css in je teksteditor. Voeg tussen de donkere kleine schaduw en de grotere blauwe schaduw op de .disclosure-alert-selector de volgende gemarkeerde CSS toe uit het codeblok:
Deze toevoeging aan de schaduwset houdt de x-as offset op 0, maar verplaatst de y-as aanzienlijk naar 6rem. Vervolgens is de vervaging niet zo groot als de gloed, maar heeft een redelijke grootte van 4rem. Dan komt de vervagingsspreidingswaarde, die in dit geval is ingesteld op -2rem. De standaardwaarde voor de spreiding is 0, wat gelijk is aan de container. Bij -2rem zal de spreiding naar binnen condenseren vanaf de container om een visueel effect van diepte te creëren.
Sla uw wijzigingen op in styles.css, vernieuw vervolgens index.html in de browser. De schaduw is een dieppaarse kleur die het gevoel geeft dat de hoofdinhoudsbox goed boven het oppervlak van de maan zweeft, zoals weergegeven in de volgende afbeelding:
Nog een gebruik van een box-shadow is het creëren van een lichte highlight- en schaduwafschuiningseffect, zoals je eerder hebt gedaan met de border-eigenschap op de header. Het voordeel van het gebruik van een box-shadow in plaats van een border is dat het de boxmodel niet beïnvloedt, wat verschuivingen in de inhoudsflow veroorzaakt. Het kan ook samen met een border worden gebruikt. Bij het gebruik van dit effect met een border moet de waarde inset worden toegevoegd aan de box-shadow zodat de schaduw zich binnenin de container bevindt.
Om een inset-waarde te gebruiken op de box-shadow, opent u styles.css in uw teksteditor. Dit effect zal worden toegevoegd aan de knoppen, dus u past deze stijlen toe op .button-primary, .button-primary:hover, .button-secondary en .button-secondary:hover. Net als bij de text-shadow, bestaat dit uit een combinatie van 0 1px en 0 -1px offset. Het verschil is dat het woord inset aan het begin of aan het einde van de waarde kan worden toegevoegd, zoals in onderstaande codeblok wordt gemarkeerd:
Sla deze wijzigingen op in styles.css en vernieuw vervolgens index.html in uw browser. De knoppen hebben nu een highlight en een schaduw, vergelijkbaar met de tekst. Dit gecombineerd met de gradiëntachtergrond creëert een eenvoudig, maar onderscheiden effect voor knoppen. De volgende afbeelding laat zien hoe dit in de browser wordt weergegeven:
Ten slotte kunt u ook een vervagingsverspreidingswaarde toepassen op een ingezette schaduw. De verspreiding verplaatst het startpunt van de vervaging vanaf de rand naar buiten, maar bij gebruik van inset verplaatst de verspreiding het startpunt naar binnen. Dit betekent dat wanneer een negatieve waarde wordt toegepast op de verspreiding op een inset, de schaduw buiten het zichtbare gebied van het element uitbreidt. De naar buiten gerichte uitbreiding van de verspreiding kan een schaduw creëren die lijkt op een korte gradiënt. Dit kan de illusie creëren dat een element afgeronde randen heeft omdat de schaduw onder de inhoud van het element wordt toegepast.
Om dit effect te creëren, opent u styles.css in uw teksteditor. Navigeer naar de .legal-contents class selector en voeg een box-shadow eigenschap toe. Deze schaduw zal bestaan uit drie schaduwen. De eerste zal een korte schaduw instellen rond de binnenkant van de hele container, en de volgende twee zullen een langwerpige lichte schaduw boven en onder het element bieden. De gemarkeerde CSS in het volgende codeblok laat zien hoe dit is opgezet:
Sla uw wijzigingen op in styles.css, vernieuw vervolgens de pagina in de browser. De schaduwen creëren nu een effect waardoor de wettelijke tekst lijkt alsof het in het venster van de container is geplaatst. De schaduwen helpen ook bij het verbeteren van de border kleuren die op dit element zijn toegepast. De volgende afbeelding illustreert hoe dit in de browser wordt weergegeven:
In dit gedeelte past u de box-shadow eigenschap toe. U heeft ook de blur spread en inset functies van box-shadow gebruikt om meer stylingopties mogelijk te maken. In het laatste gedeelte zal de outline eigenschap implementeren en vervolgens box-shadow gebruiken om een meer veelzijdige outline te maken.
Het Gebruik van de outline Eigenschap
De laatste eigenschap die de randen van elementen beïnvloedt, is de `outline` eigenschap. In alle browsers wordt de `:focus`-toestand van elementen gemaakt met behulp van de `outline` eigenschap. De implementatie van de standaard `:focus` stijl verschilt echter aanzienlijk per browser. De `outline` eigenschap lijkt op de `border` eigenschap, behalve voor twee belangrijke verschillen: Het heeft geen directionele eigenschapsvariaties, en het beïnvloedt niet het boxmodel. Het laatste van die twee verschillen maakt het ideaal voor `:focus`-stijlen, omdat het een visuele indicatie van het actieve element geeft zonder de inhoudsstroom te verstoren.
Om de standaard van een `:focus`-toestand van een browser te observeren, opent u `index.html` in uw browser. Gebruik de `TAB`-toets om door de pagina te navigeren totdat een van de onderste knoppen de focus heeft. Afhankelijk van de browser die u gebruikt, kunt u de standaard `:focus`-stijlen wel of niet zien. Firefox toont bijvoorbeeld een witte gestippelde rand, maar deze is niet waarneembaar tegen de lichtgrijze achtergrond. De volgende afbeelding laat van links naar rechts zien hoe de standaard focusstijl eruitziet in Firefox, Safari en Chrome:
Om uw eigen `:focus`-toestand aan te passen met behulp van de `outline` eigenschap, opent u `styles.css` in uw teksteditor. Ga naar de `.button` class selector en voeg de `outline` eigenschap toe:
Net als bij de border-eigenschap omvat de waarde voor de outline een breedte-, stijl- en kleurwaarde. Aangezien het doel van een focusstaat is om de aandacht op een element te vestigen, neemt de breedte toe tot 0,25rem, wat gelijk is aan 4px. Vervolgens stel je de stijl in op solid, zodat de focusstaat meer lijkt op die van Safari en Chrome. Ten slotte stel je de kleur in op een diepblauw met hsl(200, 100%, 50%).
Sla je wijzigingen op in styles.css, keer dan terug naar je browser en vernieuw de pagina. Opnieuw bepaalt de browser hoe de outline wordt weergegeven. De volgende afbeelding laat zien hoe deze stijlen eruit zien in Firefox, Safari en Chrome, van links naar rechts:
Over alle drie browsers heen wordt de outline-eigenschap behoorlijk anders weergegeven. Firefox blijft strak rondom de hele afgeronde vorm van de knop. Safari creëert een rechthoekige doos met rechte hoeken, maar raakt de randen van de knop. Chrome is vergelijkbaar met Safari, maar voegt wat extra ruimte toe tussen de knop en de outline.
Om een stijl te creëren die eruitziet als die van Firefox in alle browsers, moet je box-shadow gebruiken in plaats van outline.
Om te beginnen met het maken van een meer aangepaste :focus-staat, keer terug naar je styles.css-bestand in je teksteditor. Het eerste wat je moet doen is de standaard outline-stijl van de browser uitschakelen door de waarde op de .button:focus-selector’s outline te wijzigen naar none, zoals gemarkeerd in de volgende codeblok:
Ga vervolgens naar de button-primary:hover en button-secondary:hover selectoren en voeg een komma toe gevolgd door een :focus toestandsvariatie, zoals gemarkeerd in de volgende codeblok:
Tenslotte maak twee nieuwe selectoren voor elk knop’s :focus, .button-primary:focus, en .button-secondary:focus. Voeg binnen de nieuwe selector blokken een nieuwe box-shadow eigenschap toe met dezelfde ingesprongen schaduwen als hun :hover, :focus tegenhanger. Voeg vervolgens nog een schaduw toe aan de serie met de offsets en vervaging allemaal ingesteld op 0. Voeg daarna een spreiding van 0.25rem toe, wat een solide, niet-vervagen lijn rond het element zal creëren. Voeg tot slot dezelfde kleur toe aan beide gevallen. De gemarkeerde CSS in het volgende codeblok laat zien hoe dit is geschreven:
Sla deze wijzigingen op in styles.css en keer terug naar je browser om index.html te vernieuwen. Nu, terwijl je de TAB-toets gebruikt om door de pagina te navigeren. Ongeacht de browser, zal de :focus-stijl op de knoppen er nu hetzelfde uitzien. De volgende afbeelding laat zien hoe de box-shadow-versie van een outline eruitziet in de browser samen met de hele pagina:
Deze laatste sectie introduceerde je bij de outline-eigenschap en hoe elke browser deze op verschillende manieren gebruikt. Ten minste is een :focus-indicator nodig voor toegankelijkheid, en de outline-eigenschap klaart de klus. Hierop voortbouwend, heb je ook een meer geavanceerde en visueel consistente :focus-stijl gemaakt door een box-shadow te creëren met een grote spreidingswaarde.
Conclusie
Het stylen van de randen van elementen maakt het ontwerp van een website gevarieerder en trekt de aandacht. De border-eigenschap kan helpen bij het bieden van definitie en scheiding tussen inhoud. De border-radius-eigenschap verzacht de esthetiek en helpt bij het definiëren van de uitstraling van het ontwerp. Schaduwen op tekst en vakken brengen diepte en helpen bij het vestigen van de aandacht op de inhoud. Ten slotte biedt de outline-eigenschap toegankelijke manieren om de aandacht te vestigen op elementen met toetsenbordfocus. In deze tutorial heb je al deze eigenschappen gebruikt om een visueel interessante en bruikbare webpagina te maken. Het begrijpen van elk van deze eigenschappen en wanneer en hoe ze te gebruiken zal helpen bij het oplossen van allerlei front-end interfaceproblemen en het creëren van nieuwe ervaringen.
Als je meer CSS-tutorials wilt lezen, probeer dan de andere tutorials in de How To Style HTML with CSS serie.