Bert Bos | Kleur (Future CSS, Utrecht 2013)

Kleur

(Color)

Cascading Style Sheets

2 properties: 'color', 'opacity'
andere modules definiëren andere proeprties (border, background, outline...)
6 manieren om kleur te specificeren: color names, hex, rgb, rgba, hsl, hsla
'opacity' voor hele element, hsla/rgba alleen voor één component van het elt:
    P {color: hsla(0, 100%, 50%, 0.7)}
       vs
    P {color: hsl(0, 100%, 50%); opacity: 0.7}

currentcolor - zie erratum

spelen met hsl: aantal element die alleen verschillen in H, of alleen in L

(opacity: verwijzing naar compositing and blending, photoshop layer effects)

Ondoorzichtige kleuren

red=0deg, green=120deg, blue=240deg

Kleuren worden gebruikt voor tekst, kaders, kleurgradiënten en binnenkort ook voor onderstreping.

Naam	Hex	RGB	HSL
aquamarine	#7FFFD4	rgb(127,255,212)	hsl(160,100%,75%)
-	#DC9074	rgb(220,144,116)	hsl(16,50%,66%)
coral	#FF7F50	rgb(255,127,80)	hsl(16,100%,66%)
-	#b73000	rgb(184,49,0)	hsl(16,100%,36%)
darkorchid	#9932CC	rgb(153,50,204)	hsl(280,61%,50%)
black	#000	rgb(0,0,0)	hsl(0,0,0)
gold	#FFD700	rgb(255,215,0)	hsl(51,100%,50%)

Doorzichtige kleuren

rgba(R,G,B,alpha) and hsla(H,S,L,alpha)

hsla(20, 90%, 50%, 0.0)

hsla(20, 90%, 50%, 0.3)

hsla(20, 90%, 50%, 0.6)

hsla(20, 90%, 50%, 1.0)

'opacity' maakt het hele element doorzichtig

P {opacity: 0.8}← vrijwel ondoorzichtig

Compositing & blending

Transparantie is maar één manier om voor- en achtergrond te combineren

Twee nieuwe modules met geavanceerde grafische operaties zijn in ontwikkeling:

Oefening

Maak een document met een aantal elementen die alleen in tint (hue) verschillen

Dit kan een probleem geven voor mensen met slechte ogen of kleurenblindheid. Wat kun je daaraan doen?

Einde

→ Terug naar agenda