Animaties, overgangen, filters en maskers
Vooraleer je hiervan gebruik maakt, moet je goed begrijpen hoe CSS-klassen functioneren. Bekijk hiervoor de les op https://www.schoolvoorbeeld.be/cursuswebdesign/html-vormgeven-css#movie
1. CSS-animaties en -transities
Met CSS kan je elementen ook animeren of er overgangseffecten aan toevoegen.
Plak de volgende regel bovenaan in uw CSS-bestand:
@import url('https://www.schoolvoorbeeld.be/css/crowl.animations.css');Kies de gewenste CSS-klasse: CSS-animaties
2. CSS-filters
Je kan ook filters toevoegen aan je afbeeldingen of elementen:
Effect | CSS-klasse | CSS-klasse voor muisover-effect |
grijstinten | bw | bwOnMouseOver |
sepia | sepia | sepiaOnMouseOver |
negatief | invert | invertOnMouseOver |
zacht vervagen | softblur | softblurOnMouseOver |
laag bovenop | overlay | overlayOnMouseOver |
verschil | difference | differenceOnMouseOver |
vermenigvuldigen | multiply | multiplyOnMouseOver |
... | ... | ... |