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:

EffectCSS-klasse CSS-klasse voor muisover-effect
grijstinten bwbwOnMouseOver
sepiasepiasepiaOnMouseOver
negatiefinvertinvertOnMouseOver
zacht vervagensoftblursoftblurOnMouseOver
laag bovenopoverlayoverlayOnMouseOver
verschildifferencedifferenceOnMouseOver
vermenigvuldigenmultiplymultiplyOnMouseOver
.........

Andere filters (volgens zelfde schema uit bovenstaande tabel te bouwen:

screen, darken, lighten, color-dodge, color-burn, exclusion, hue, saturation, color, luminosity, strongblur, contrast

Maskers

tekstballon, ster, hexagoon, cirkel, bericht, fadetop, fadingcircle, textmask


home