Samenvatting
Met effecten in Mach3Blocks geef je elementen visuele diepte: schaduwen die een kaart los laten lijken van de achtergrond, afbeeldingen die van kleur naar zwart-wit gaan, of elementen die iets vergroten bij hover. In dit artikel vind je zes voorbeelden die je stap voor stap kunt navolgen.
Hoe werkt het
Zo werkt elk voorbeeld
De basisstappen zijn steeds hetzelfde:
- Selecteer het element in de editor
- Ga naar het tabblad Opmaak
- Kies de staat: Standaard (altijd zichtbaar) of Mouseover (alleen bij hover)
- Stel de effectwaarden in
- Voeg een overgang toe (via de Overgangen-tab) om het resultaat vloeiend te maken
Voorbeeld 1: Kaart met schaduw die omhoog lijkt te zweven bij hover
Dit is een van de meest gebruikte effecten. De kaart heeft standaard een subtiele schaduw, en bij hover wordt de schaduw groter — waardoor het lijkt alsof de kaart omhoog komt.
Stappen:
- Selecteer de kaart
- Ga naar Opmaak → Standaard en stel een kleine schaduw in (bijv. 0px horizontaal, 2px verticaal, 8px vervaging, lichte kleur)
- Ga naar Opmaak → Mouseover en vergroot de schaduw (bijv. 0px horizontaal, 8px verticaal, 24px vervaging, iets donkerder)
- Ga naar Overgangen → voeg een overgang toe op Schaduw, duur 0,3s, timing Vloeiend
Voorbeeld 2: Afbeelding is zwart-wit en wordt kleur bij hover
De afbeelding staat standaard in zwart-wit. Zodra iemand er met de muis overheen gaat, verschijnt de kleur. Dit werkt goed voor team- of portfoliopagina's.
Stappen:
- Selecteer de afbeelding
- Ga naar Opmaak → Standaard → zet Grijstinten op 100% (volledig zwart-wit)
- Ga naar Opmaak → Mouseover → zet Grijstinten op 0% (volle kleur)
- Ga naar Overgangen → voeg een overgang toe op Filter, duur 0,4s, timing Vloeiend
Voorbeeld 3: Afbeelding met vintage uitstraling (sepia)
Geef een afbeelding een warme, ouderwetse tint. Dit is een statisch effect — je hoeft er geen hover voor in te stellen.
Stappen:
- Selecteer de afbeelding
- Ga naar Opmaak → Standaard
- Zet Sepia op een waarde naar smaak (60–80% geeft een mooi vintage effect)
Wil je het toch als hover-effect gebruiken? Zet sepia dan op 0% bij Standaard en op je gewenste waarde bij Mouseover, en voeg een overgang toe.
Voorbeeld 4: Knop met subtiele schaduw
Een lichte schaduw achter een knop geeft het gevoel dat de knop losstaand is van de achtergrond. Dit maakt knoppen er klikbaarder uit laten zien.
Stappen:
- Selecteer de knop
- Ga naar Opmaak → Standaard en stel een schaduw in (bijv. 0px horizontaal, 2px verticaal, 6px vervaging, donkere kleur met lage doorzichtigheid)
- Optioneel: ga naar Mouseover en maak de schaduw iets groter
- Voeg een overgang toe op Schaduw, duur 0,2s
Voorbeeld 5: Element wordt iets groter bij hover
Het element schaalt licht op als iemand er met de muis overheen gaat. Dit geeft een interactief gevoel — de bezoeker ziet dat het element klikbaar is.
Stappen:
- Selecteer het element (knop, afbeelding of kaart)
- Ga naar Opmaak → Mouseover en zet Schaal op 1.03 (dat is 3% groter)
- Ga naar Overgangen → voeg een overgang toe op Schaal, duur 0,25s, timing Vloeiend
Tip: Een schaalvergroting van 1.03 tot 1.05 werkt het beste. Groter dan 1.1 voelt al snel overdreven.
Voorbeeld 6: Gecombineerd — schaduw + schaal bij hover
Dit is het meest complete hover-effect: de schaduw wordt groter én het element wordt iets groter. Dit wordt veel gebruikt voor kaarten en call-to-action blokken.
Stappen:
- Selecteer het element
- Standaard: stel een kleine schaduw in
- Mouseover: vergroot de schaduw + zet de schaal op 1.03
- Overgangen: voeg twee overgangen toe — één op Schaduw en één op Schaal, beide 0,3s met timing Vloeiend
Tips
- Combineer effecten met overgangen voor een vloeiend resultaat. Een effect zonder overgang verandert abrupt.
- Houd schaduwen subtiel: grote schaduwen met een hoge dekking voelen zwaar en onprofessioneel aan.
- Denk aan mobiel: hover-effecten werken niet op telefoons en tablets. Zorg dat alles er ook zonder hover goed uitziet.
- Sepia en grijstinten zijn krachtig voor een consistente stijl, maar gebruik ze bewust — het moet passen bij je ontwerp.
Wanneer gebruik je dit
- Je zoekt praktische voorbeelden van effecten om direct toe te passen
- Je wilt leren hoe je schaduwen, filters en schaal combineert
- Je zoekt inspiratie voor hover-effecten op kaarten, knoppen of afbeeldingen