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 Grensverkorting 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
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
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- kleuren

❮ Vorig Volgende ❯

CSS ondersteunt meer dan 140 kleurnamen, HEX-waarden, RGB-waarden , RGBA-waarden, HSL-waarden, HSLA-waarden en dekking.

RGBA-kleuren

RGBA-kleurwaarden zijn een uitbreiding van RGB-kleurwaarden met een alfakanaal - dat de dekking voor een kleur specificeert.

Een RGBA-kleurwaarde wordt opgegeven met: rgba(rood, groen, blauw, alfa). De alfaparameter is een getal tussen 0,0 (volledig transparant) en 1,0 (volledig ondoorzichtig).

rgba (255, 0, 0, 0.2);
rgba (255, 0, 0, 0,4);
rgba (255, 0, 0, 0,6);
rgba (255, 0, 0, 0,8);

Het volgende voorbeeld definieert verschillende RGBA-kleuren:

Voorbeeld

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

HSL-kleuren

HSL staat voor Hue, Saturation en Lightness.

Een HSL-kleurwaarde wordt opgegeven met: hsl(hue, saturation, lightness).

  1. Tint is een graad op het kleurenwiel (van 0 tot 360):
    • 0 (of 360) is rood
    • 120 is groen
    • 240 is blauw
  2. Verzadiging is een procentuele waarde: 100% is de volledige kleur.
  3. Lichtheid is ook een percentage; 0% is donker (zwart) en 100% is wit.
hsl (0, 100%, 30%);
hsl (0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Het volgende voorbeeld definieert verschillende HSL-kleuren:

Voorbeeld

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

HSLA-kleuren

HSLA-kleurwaarden zijn een uitbreiding van HSL-kleurwaarden met een alfakanaal - dat de dekking voor een kleur specificeert.

Een HSLA-kleurwaarde wordt gespecificeerd met: hsla(tint, verzadiging, lichtheid, alfa), waarbij de alfa-parameter de dekking definieert. De alfaparameter is een getal tussen 0,0 (volledig transparant) en 1,0 (volledig ondoorzichtig).

hsla (0, 100%, 30%, 0,3);
hsla (0, 100%, 50%, 0,3);
hsla (0, 100%, 70%, 0,3);
hsla (0, 100%, 90%, 0,3);

Het volgende voorbeeld definieert verschillende HSLA-kleuren:

Voorbeeld

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

dekking

De CSS opacity-eigenschap stelt de dekking voor het hele element in (zowel de achtergrondkleur als de tekst zijn ondoorzichtig/transparant).

De opacityeigenschapswaarde moet een getal zijn tussen 0,0 (volledig transparant) en 1,0 (volledig dekkend).

rgb(255, 0, 0);dekking:0.2;
rgb(255, 0, 0);dekking:0.4;
rgb(255, 0, 0);dekking:0.6;
rgb (255, 0, 0); dekking: 0,8;

Merk op dat bovenstaande tekst ook transparant/ondoorzichtig zal zijn!

Het volgende voorbeeld toont verschillende elementen met dekking:

Voorbeeld

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

Test jezelf met oefeningen

Oefening:

Voeg de RGBA-kleurwaarde in voor een volledig rode achtergrondkleur van het <h1>-element, zonder transparantie.

<style>
h1 {
  background-color: ;
}
</style>

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


❮ Vorig Volgende ❯