Gebruikerswaardering: 0 / 5

Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

Wanneer je een kleur hebt ingesteld, dan is het mogelijk om met behulp van een CSS-filter die kleur aan te passen. Dit is met name praktisch, wanneer je bijv. voor een knop wel de zelfde kleur wilt gebruiken, maar slechts een lichtere of donkerdere variant wilt maken wanneer je er met je muis overheen gaat. Je hoeft dan zelf niet uit te rekenen wat die lichtere kleur is. Hieronder is dat te zien. De CSS die gebruikt is ziet er als volgt uit: .

.mijnklasse:hover { filter: brightness(50%); }
0% 25% 50% 75% 100% 150% 200%

Naast een filter voor brightness zijn er overigens nog een paar andere (let op de gebruikte eenheden): blur(..px), contrast(..%), grayscale(..%), hue-rotate(..deg), invert(..%), saturate(..%), sepia(..%).

Hieronder een paar voorbeelden, probeer maar eens wat verschillende waardes uit (ook extreme waardes zoals bijv. 2000%) en laat je verrassen.

Let wel op, dat deze filters relatief nieuw zijn en daardoor in oudere browsers niet (goed) werken.

blur(5px) contrast(200%) grayscale(100%) hue-rotate(120deg) invert(100%) saturate(200%) sepia(100%)

Deze effecten kunnen overigens ook op afbeeldingen <img src="/images/foto.jpg"> worden toegepast, zoals hieronder te zien is:


blur(2px)

brightness(150%)

contrast(200%)

grayscale(100%)

hue-rotate(120deg)

invert(100%)

saturate(200%)

sepia(100%)