CSS Kleuren
CSS biedt verschillende nieuwe manieren om kleurwaarden te definiëren.In het basis gedeelte van CSS heb je geleerd hoe je kleuren kunt definiëren met behulp van de kleurtrefwoorden en de RGB-waarden. Daarnaast voegt CSS3 enkele nieuwe functies toe voor het instellen van de waarden voor de elementen rgba(), hsl() en hsla().
RGBA kleuren
RGBA-kleurwaarden zijn een uitbreiding van de RGB-kleurwaarden met een alfakanaal, dat de transparantie (opacity) voor een kleur specificeert. Kleuren worden gedefinieerd met de RGBA-waarden (rood-groen-blauw-alfa).De alpha-parameter is een getal tussen 0.0 (volledig transparant) en 1.0 (volledig zichtbaar).
rgba(79, 179, 127, 0.2);
rgba(79, 179, 127, 0.4);
rgba(79, 179, 127, 0.6);
rgba(79, 179, 127, 0.8);
In het volgende voorbeeld worden verschillende RGBA-kleuren gedefinieerd:
Voorbeeld:
#p1 { background-color: rgba(255,0,0,0.3); }
#p2 { background-color: rgba(0,255,0,0.3); }
#p3 { background-color: rgba(0,0,255,0.3); }
#p4 { background-color: rgba(192,192,192,0.3); }
#p5 { background-color: rgba(255,255,0,0.3); }
#p6 { background-color: rgba(255,0,255,0.3); }
HSL kleuren
HSL staat in het engels voor Hue, Saturation en Lightness. Dit betekent dat een HSL-kleurwaarde wordt gespecificeerd met: hsl(tint, verzadiging, lichtheid).- Tint is een graad op het kleurenwiel (van 0 tot 360):
- 0 (of 360) is rood
- 120 is groen
- 240 is blauw
- Verzadiging is een percentage in procenten: 100% is de volledige kleur.
- 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%);
In het volgende voorbeeld worden verschillende HSL-kleuren gedefinieerd:
Voorbeeld:
#p1 { background-color: hsl(120,100%,50%); }
#p2 { background-color: hsl(120,100%,75%); }
#p3 { background-color: hsl(120,100%,25%); }
#p4 { background-color: hsl(120,60%,70%); }
#p5 { background-color: hsl(290,100%,50%); }
#p6 { background-color: hsl(290,60%,70%); }
HSLA kleuren
Kleuren kunnen worden gedefinieerd met het HSLA kleurcodering (tint-verzadiging-lichtheid-alfa). HSLA is een uitbreiding van het HSL kleurcodering dat een alfakanaal aan toevoegt, die de transparantie (opacity) van een kleur specificeert.
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
In het volgende voorbeeld worden verschillende HSLA-kleuren weergegeven:
Voorbeeld:
#p1 { background-color: hsla(120,100%,50%,0.3); }
#p2 { background-color: hsla(120,100%,75%,0.3); }
#p3 { background-color: hsla(120,100%,25%,0.3); }
#p4 { background-color: hsla(120,60%,70%,0.3); }
#p5 { background-color: hsla(290,100%,50%,0.3); }
#p6 { background-color: hsla(290,60%,70%,0.3); }
Opacity (transparantie)
De CSS eigenschapopacity stelt de transparantie in voor het hele element, zowel de achtergrondkleur als de kleur van de tekst zijn transparant. De waarde van de opacity eigenschap moet een getal zijn tussen 0.0 en 1.0
rgba(79, 179, 127); opacity:0.2;
rgba(79, 179, 127); opacity:0.4;
rgba(79, 179, 127); opacity:0.6;
rgba(79, 179, 127); opacity:0.8;
In het volgende voorbeeld worden verschillende RGBA-kleuren gedefinieerd:
Voorbeeld:
#p1 {background-color: rgb(255,0,0); opacity:0.6; }
#p2 { background-color: rgb(0,255,0); opacity:0.6; }
#p3 { background-color: rgb(0,0,255); opacity:0.6; }
#p4 { background-color: rgb(192,192,192); opacity:0.6; }
#p5 { background-color: rgb(255,255,0); opacity:0.6; }
#p6 { background-color: rgb(255,0,255); opacity:0.6; }
