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 handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure
Kleure RGB HEX HSL
CSS agtergronde
Agtergrondkleur Agtergrondprent Agtergrond Herhaal Agtergrond Aanhangsel Agtergrond Snelskrif
CSS-grense
Grense Grens breedte Rand Kleur Grenskante Grens Snelskrif Afgeronde grense
CSS-marges
Marges Margin Collapse
CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS teks
Teks kleur Teksbelyning Teksversiering Tekstransformasie Teksspasiëring Teks skaduwee
CSS lettertipes
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-ikone CSS skakels CSS-lyste CSS-tabelle
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float
Float Clear Float Examples
CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS -teksskadu

❮ Vorige Volgende ❯

Teks skaduwee

Die text-shadoweiendom voeg skaduwee by teks.

In sy eenvoudigste gebruik, spesifiseer jy net die horisontale skaduwee (2px) en die vertikale skaduwee (2px):

Teks skadu-effek!

Voorbeeld

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

Voeg dan 'n kleur (rooi) by die skaduwee:

Teks skadu-effek!

Voorbeeld

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

Voeg dan 'n vervaag-effek (5 px) by die skaduwee:

Teks skadu-effek!

Voorbeeld

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

Meer teksskaduvoorbeelde

Voorbeeld 1

Teks-skaduwee op 'n wit teks:

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

Voorbeeld 2

Teks-skadu met rooi neon gloed:

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

Voorbeeld 3

Teks-skadu met rooi en blou neon gloed:

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;
}

Wenk: Gaan na ons CSS Fonts -hoofstuk om te leer hoe om lettertipes, teksgrootte en die styl van 'n teks te verander.

Wenk: Gaan na ons CSS-tekseffekte -hoofstuk om meer te wete te kom oor verskillende tekseffekte.

Toets jouself met oefeninge

Oefening:

Verander die tekskleur van alle <p>-elemente na "rooi".

<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-tekseienskappe

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

❮ Vorige Volgende ❯