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
kleuren RGB HEX HSL
CSS-achtergronden
Achtergrond kleur Achtergrond afbeelding achtergrond herhaling Achtergrondbijlage Achtergrond steno
CSS-randen
grenzen Grensbreedte Rand kleur Rand Zijkanten Grens steno Afgeronde randen
CSS-marges
Marges Margin Collapse
CSS-opvulling CSS Hoogte/Breedte CSS-boxmodel CSS-overzicht
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-tekst
Tekst kleur Tekstuitlijning Tekst Decoratie Tekst transformatie Tekstafstand Schaduw tekst
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
Shadow Effects Box Shadow
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 -tekstschaduw

❮ Vorig Volgende ❯

Schaduw tekst

De text-shadoweigenschap voegt schaduw toe aan tekst.

In het eenvoudigste gebruik specificeert u alleen de horizontale schaduw (2px) en de verticale schaduw (2px):

Tekst schaduweffect!

Voorbeeld

h1 {
  text-shadow: 2px 2px;
}

Voeg vervolgens een kleur (rood) toe aan de schaduw:

Tekst schaduweffect!

Voorbeeld

h1 {
  text-shadow: 2px 2px red;
}

Voeg vervolgens een vervagingseffect (5px) toe aan de schaduw:

Tekst schaduweffect!

Voorbeeld

h1 {
  text-shadow: 2px 2px 5px red;
}

Meer voorbeelden van tekstschaduw

voorbeeld 1

Tekstschaduw op een witte tekst:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Voorbeeld 2

Tekstschaduw met rode neongloed:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Voorbeeld 3

Tekstschaduw met rode en blauwe neongloed:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Voorbeeld 4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Tip: ga naar ons hoofdstuk CSS-lettertypen voor meer informatie over het wijzigen van lettertypen, tekstgrootte en de stijl van een tekst.

Tip: Ga naar ons hoofdstuk CSS-teksteffecten om meer te weten te komen over verschillende teksteffecten.

Test jezelf met oefeningen

Oefening:

Verander de tekstkleur van alle <p> elementen in "rood".

<style>
p {
  : red;
}
</style>

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

Alle CSS-teksteigenschappen

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-align-last Specifies how to align the last line of a text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

❮ Vorig Volgende ❯