HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -zelfstudie

CSS HOME CSS-introductie CSS-syntaxis CSS-kiezers CSS-handleiding CSS-opmerkingen CSS-kleuren
Colors RGB HEX HSL
CSS-achtergronden
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS-randen
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS-marges
Margins Margin Collapse
CSS-opvulling CSS Hoogte/Breedte CSS-boxmodel CSS-overzicht
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-tekst
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-lettertypen
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-pictogrammen CSS-links CSS-lijsten CSS-tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-weergave CSS Max-breedte CSS-positie CSS Z-index CSS-overloop CSS zweven
Float Clear Float Examples
CSS Inline-blok CSS uitlijnen CSS-combinaties CSS Pseudo-klasse CSS Pseudo-element CSS-dekking CSS-navigatiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-dropdownmenu's CSS-afbeeldingengalerij CSS-afbeeldingssprites CSS Attr-kiezers CSS-formulieren CSS-tellers CSS-websitelay-out CSS-eenheden CSS-specificiteit CSS !belangrijk CSS wiskundige functies

CSS Geavanceerd

CSS afgeronde hoeken CSS-randafbeeldingen CSS-achtergronden CSS-kleuren CSS-kleurzoekwoorden CSS-verlopen
Linear Gradients Radial Gradients Conic Gradients
CSS-schaduwen
Schaduweffecten Doos Schaduw
CSS-teksteffecten CSS-weblettertypen CSS 2D-transformaties CSS 3D-transformaties CSS-overgangen CSS-animaties CSS-tooltips Afbeeldingen in CSS-stijl CSS-beeldreflectie CSS-object-fit CSS-objectpositie CSS-maskering CSS-knoppen CSS-Paginering CSS Meerdere kolommen CSS-gebruikersinterface CSS-variabelen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Grootte van CSS-box CSS-mediaquery's CSS MQ-voorbeelden CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsief

RWD Intro RWD-kijkpoort RWD-rasterweergave RWD-mediaquery's RWD-afbeeldingen RWD-video's RWD-frameworks RWD-sjablonen

CSS- raster

Rasterintro Rastercontainer Rasteritem

CSS SASS

SASS-zelfstudie

CSS- voorbeelden

CSS-sjablonen CSS-voorbeelden css-quiz CSS-oefeningen CSS-certificaat

CSS- referenties

CSS-referentie CSS-kiezers CSS-functies CSS Referentie Auditief CSS webveilige lettertypen CSS animeerbaar CSS-eenheden CSS PX-EM-converter CSS-kleuren CSS-kleurwaarden CSS-standaardwaarden Ondersteuning voor CSS-browser

CSS -vakschaduw

❮ Vorig Volgende ❯

CSS box-schaduw eigenschap

De CSS- box-shadoweigenschap wordt gebruikt om een ​​of meer schaduwen op een element toe te passen.

Specificeer een horizontale en een verticale schaduw

In het eenvoudigste gebruik specificeert u alleen een horizontale en een verticale schaduw. De standaardkleur van de schaduw is de huidige tekstkleur.

Een <div> element met een box-schaduw

Voorbeeld

Specificeer een horizontale en een verticale schaduw:

div {
  box-shadow: 10px 10px;
}

Specificeer een kleur voor de schaduw

De colorparameter definieert de kleur van de schaduw.

Een <div> element met een grijze box-schaduw

Voorbeeld

Geef een kleur op voor de schaduw:

div {
  box-shadow: 10px 10px grey;
}

Een vervagingseffect toevoegen aan de schaduw

De blurparameter definieert de vervagingsradius. Hoe hoger het getal, hoe vager de schaduw zal zijn.

Een <div> element met een 5px vervaagde, grijze box-schaduw

Voorbeeld

Voeg een vervagingseffect toe aan de schaduw:

div {
  box-shadow: 10px 10px 5px grey;
}

Stel de spreidingsstraal van de schaduw in

De spreadparameter definieert de strooistraal. Een positieve waarde vergroot de grootte van de schaduw, een negatieve waarde verkleint de grootte van de schaduw.

Een <div>-element met een wazige, grijze doosschaduw, met een spreidingsradius van 12px

Voorbeeld

Stel de spreidingsradius van de schaduw in:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Stel de inzetparameter in:

De insetparameter verandert de schaduw van een buitenste schaduw (begin) in een binnenste schaduw.

Een <div>-element met een vage, grijze, ingevoegde doosschaduw

Voorbeeld

Voeg de inzetparameter toe:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Meerdere schaduwen toevoegen

Een element kan ook meerdere schaduwen hebben:

Voorbeeld

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Kaarten

U kunt de box-shadoweigenschap ook gebruiken om papierachtige kaarten te maken:

1

1 januari 2021

Noorwegen

Hardanger, Noorwegen

Voorbeeld

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Test jezelf met oefeningen

Oefening:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯