Samenvatting
Met effecten voeg je visuele aanpassingen toe aan elementen op je website. Denk aan een schaduw achter een kaart, een zwart-witfilter op een afbeelding, of een element dat iets gedraaid staat. Je vindt alle effecten in de Opmaak-tab wanneer je een element selecteert.
Hoe werkt het
Schaduw
Een schaduw geeft een element diepte — het lijkt alsof het boven de pagina zweeft. Je stelt vier dingen in:
| Instelling | Wat doet het? |
|---|---|
| Afstand horizontaal | Hoe ver de schaduw naar links of rechts verschuift |
| Afstand verticaal | Hoe ver de schaduw naar boven of onder verschuift |
| Vervaging | Hoe zacht de schaduw is — een hogere waarde maakt de schaduw waziger en groter |
| Kleur | De kleur van de schaduw. Vaak gebruik je zwart met een beetje doorzichtigheid |
Tip: Een subtiele schaduw (2–4px vervaging) werkt goed voor knoppen en kaarten. Een grotere schaduw geeft het effect dat het element boven de pagina zweeft.
Filters
Met filters pas je visuele effecten toe op een heel element. Er zijn drie filteropties:
| Filter | Wat doet het? |
|---|---|
| Vervaging | Maakt het element wazig, alsof je door matglas kijkt |
| Grijstinten | Maakt het element zwart-wit. Bij 100% is het volledig zwart-wit, bij 50% half |
| Sepia | Geeft een warme, ouderwetse tint — leuk voor een vintage uitstraling |
Transformaties
Met transformaties verander je hoe een element eruitziet, zonder dat de rest van je pagina verschuift. Andere elementen merken er niets van.
| Transformatie | Wat doet het? |
|---|---|
| Schaal | Maakt het element groter of kleiner. 1 is normaal, 1.5 is anderhalf keer zo groot |
| Rotatie | Draait het element een bepaald aantal graden |
| Verplaatsing horizontaal | Schuift het element naar links of rechts |
| Verplaatsing verticaal | Schuift het element omhoog of omlaag |
Omlining
Een omlining is een extra lijn buiten de rand van het element. Het verschil met een gewone rand: een omlining neemt geen ruimte in en verschuift andere elementen niet.
| Instelling | Wat doet het? |
|---|---|
| Dikte | Hoe dik de lijn is (in pixels) |
| Stijl | Doorgetrokken, streepjes, puntjes, etc. |
| Kleur | De kleur van de omlining |
| Afstand | Hoeveel ruimte er zit tussen het element en de omlining |
Rand
De rand is de lijn direct om je element heen.
| Instelling | Wat doet het? |
|---|---|
| Dikte | Hoe dik de rand is (in pixels) |
| Stijl | Doorgetrokken, streepjes of puntjes |
| Kleur | De kleur van de rand |
| Ronde hoeken | Hoe rond de hoeken zijn. Een hoge waarde maakt er een cirkel of ovaal van |
Effecten combineren
De kracht van effecten zit in het combineren. Hier is een voorbeeld van een populair effect:
Voorbeeld: Een kaart die omhoog lijkt te zweven bij hover
- Standaard: geef de kaart een kleine schaduw (bijv. 0px horizontaal, 4px verticaal, 12px vervaging, lichte kleur)
- Mouseover: maak de schaduw groter (bijv. 0px horizontaal, 8px verticaal, 24px vervaging, iets donkerder)
- Mouseover: voeg een verticale verplaatsing toe van -4px (de kaart schuift iets omhoog)
- Overgang: voeg een overgang toe van 0,3s met timing Vloeiend op schaduw en transform
Het resultaat: als een bezoeker met de muis over de kaart gaat, lijkt deze vloeiend omhoog te komen.
Staten
Elk effect kun je apart instellen per staat:
| Staat | Wanneer is het actief? |
|---|---|
| Standaard | Altijd — de normale weergave |
| Mouseover | Als iemand met de muis over het element gaat |
| Focus | Als het element geselecteerd is via het toetsenbord |
Door per staat andere effectwaarden in te stellen en een overgang toe te voegen, krijg je vloeiende animaties.
Wanneer gebruik je dit
- Je wilt visuele diepte toevoegen aan kaarten, knoppen of afbeeldingen
- Je zoekt een overzicht van alle beschikbare effecten
- Je wilt weten hoe je effecten combineert met overgangen voor vloeiende animaties
Veelgestelde vragen
Wat is het verschil tussen een rand en een omlining?
Een rand is onderdeel van het element en neemt ruimte in — andere elementen schuiven op. Een omlining zweeft buiten het element en heeft geen invloed op de rest van je pagina.
Kan ik meerdere effecten tegelijk gebruiken?
Ja, je kunt een schaduw, filter en transformatie tegelijk instellen. Combineer ze met overgangen voor het beste resultaat.