Naar inhoud
FFrosthaven Lab

04 — 16 varianten

Cards

Tilt, spotlight, glare, border beam, glass en bento. De card is het werkpaard van elke dienstensectie.

3D tilt

jscursor

Zwembadonderhoud

Wekelijkse controle van water, filters en techniek.

Kaart kantelt naar de cursor, inhoud steekt eruit via translateZ. Houd de hoek onder 20 graden, anders wordt tekst onleesbaar.

Cursor spotlight

jscursor

Tuinonderhoud

Snoei, beregening en gazon, het hele seizoen.

Zachte lichtvlek volgt de muis binnen de kaart. Het meest bruikbare card-effect van allemaal: subtiel genoeg voor een zakelijke dienstensectie.

Glare sheen

csshover

Glasheldere afwerking

De glans loopt één keer over de kaart bij hover.

Diagonale glans die over de kaart trekt. Geeft glaskaarten een fysiek gevoel; op matte, platte designs misstaat het.

Border beam

cssconic
aanbevolen

Premium jaarcontract

Alles inbegrepen, ook de storingsdienst.

Lichtpunt draait rond de rand. Uitstekend om de aanbevolen optie in een pricing-blok aan te wijzen; gebruik hem één keer per pagina.

Gradient border

css

Vaste kleurrand

Eén extra div, geen JavaScript, geen animatie.

Statische kleurrand via een padding-truc. Goedkoper dan een beam en werkt ook zonder animatie; de veilige variant.

Glass

cssglass

Uitzicht op zee

Glas heeft iets nodig om doorheen te kijken.

Werkt alleen bovenop beeld of kleur. Op een egale achtergrond zie je geen verschil met een gewone kaart, en dan kost de blur alleen maar performance.

Wobble

csshover

Zachte wiebel

Buitenkant groeit, binnenkant beweegt tegen.

Kaart schaalt licht mee terwijl de inhoud de andere kant op beweegt. Speels; past bij consumentenmerken, niet bij notarissen.

Expandable

jsstate

Klik klapt details uit. De grid-rows-[0fr] → [1fr] truc animeert vloeiend zonder dat je de hoogte hoeft te kennen.

Stacked deck

jsportfolio
01

Project 1

02

Project 2

03

Project 3

Stapel die uitwaaiert bij hover. Mooi om drie recente projecten compact te tonen; met meer dan vier kaarten wordt het rommelig.

Flip

css3d
Hover mij

Villa Jávea

380 m² · 2024 · volledige renovatie

Voorkant met beeld, achterkant met details. Vraagt om preserve-3d op de wrapper en backface-hidden op beide vlakken, anders zie je spiegelbeeld.

Reveal overlay

csshover
Tuin Els Poblets

Aanleg, beregening en onderhoud

Tekstblok schuift van onder over het beeld. De standaard voor portfolio- en projectrasters; zet de titel ook zichtbaar buiten hover voor touch.

Bento raster

layout

Groenonderhoud

Jaarrond, ook bij afwezigheid

210+

objecten in beheer

Ongelijke tegels in één raster. Werkt alleen als de inhoud echt verschilt in gewicht; drie identieke tegels in bento-vorm zijn gewoon drie kaarten.

Orbit

csstech

Iconen cirkelen om een middelpunt. Bedoeld om integraties of samenwerkingspartners te tonen; zonder echte logo's is het decoratie.

Direction aware

jshover

Villa Montgó

Volledige renovatie, 2025

De overlay komt binnen aan de kant waar je muis binnenkomt. Klein detail dat mensen niet bewust zien maar wel voelen.

Focus (siblings blur)

jsportfolio
Werk 1
Werk 2
Werk 3

De kaart waar je op staat blijft scherp, de rest vervaagt. Sterk in een projectraster met veel beeld; niet doen bij tekstkaarten.

Neon gradient

cssbold

Nachtaanbieding

Twee uur padel plus drankje.

Kleurgloed vanachter de kaart. Nachtelijk en luid: horeca, sportschool, gaming. Bij een zakelijke klant nooit inzetten.