28 High-Tech CSS3 Effecten voor een Moderne Website

Met CSS kun je prachtige effecten maken, modellen bouwen, vormen creëren. Perfecte CSS toevoegen is tegenwoordig niet moeilijk: duizenden gratis effecten en tutorials online. De juiste combinatie kiezen is wel een uitdaging; veel effecten voelen verouderd. We verzamelden 28 verbluffende CSS3-effecten die je website een modern look en geweldige gebruikerservaring geven. Speel vrij met de code voor geweldige resultaten.

28. 3D Tekst

Geef je koptekst een 3D-look met coole fonts en schaduweffecten.

27. Flat Icons

Pure CSS Iconex Flat Icon Set (4 iconen), ontworpen door Alireza Attari.

26. Kleurspectrum

Wat je krijgt door kleuren te mengen met box-shadow. Voortgang onder 3 kleuren.

25. Metro UI

Geïnspireerd op Windows 8-design, volledig CSS3. Iconen uit FontAwesome.

24. Elastische Stroke

Elastische tekst-stroke met mooi kleurenschema, gemaakt met CSS en SVG.

Lees ook: 50+ Prachtige Typografie Voorbeelden voor Inspiratie

23. Gelagde Vormen

Kleurrijke, gelagde vormen (volledig CSS), ontworpen door Snhasani.

22. Spiraal CSS

Wolkenachtige spiraal CSS-animatie, bruikbaar als laadicoon.

21. Tekstanimatie

Yoann creëerde deze verbluffende ticker-effect met tekstanimatie. Het toggle-effect van het tweede woord ziet er cool uit.

20. Flat Long Shadow

Ultieme shadow mixin met fade-variabelen, lange schaduwen en hoekvariabele.

19. CSS Wezens

Mooi interactieve iconen, volledig HTML en CSS.

18. 3D Flip Knop

Eenvoudige CSS3 3D flip-knop zonder JavaScript en zonder afbeeldingen.

17. Transformeer Tekst met Schaduw

CSS tekstschaduw met geavanceerde typografietechnieken via lettering.js.

16. CSS Regenboog

Volledige cirkelvormige regenboog met simpele hover-effect.

15. Kleurrijke Glitchy 404

Verbluffende glitch (+ trilling) effect met CSS en beetje JavaScript.

Lees ook: 100+ Creatieve en Grappige 404 Foutpagina's

14. UI Feedback

Bundel feedback-ideeën voor knoppen. Inspiratie voor meer dynamiek in je frontend UI.

13. Horizontale Accordeon

Horizontale accordeon in pure CSS. Elementen (geen afbeeldingen) + Genericons font voor social media iconen.

12. Cirkel Illusie

Cirkelillusie met Tusi-beweging, ontworpen door Jaime Caballero. Bruikbaar als laadbalk/icoon.

11. Seconden Teller

Elegante teller, perfect voor "binnenkort online" templates.

Lees ook: 40+ Mooie Under Construction & Coming Soon Templates

10. CSS Text-FX

Gedimd licht aan tekst toegevoegd → vlekkerige flashes.

9. CSS Menu

Modern mobiel menu met CSS3 animaties en transitions.

8. Budget Slider

Eenvoudige CSS + jQuery slider in 3D-design, geïnspireerd door Erik Deiner.

7. Geanimeerde Tekstschaduw

Geanimeerd text-shadow patroon gebruikt -webkit-background-clip: text en linear-gradient voor gestreepte tekstschaduw.

6. CSS 3D Captioned Domino Image

Responsieve 3D hover-effect met betere semantische markup, minder pseudo-elementen, minder CSS.

5. Radio Click Through

Eenvoudige afbeeldingsslider met radioknoppen, volledig in CSS.

4. Gradient Ghost Buttons

Gradient Ghost Buttons en tekst via border-image en box-shadows.

3. Squishy Toggle Buttons

Simulatie van knijpbare rubberen knoppen, ontworpen door Justin Windle.

Aanbevolen: Verse Resources voor Web Designers

2. Simpele Stack Effecten

Set toggle-effecten die laten zien hoe simpele stack-effecten te maken met perspective en 3D transform.

1. SpinKit

SpinKit (verzameling laadindicatoren) gebruikt CSS-animaties voor soepel, aanpasbare animaties.

Lees nu: 26 Moderne jQuery Plugins om Je Website Te Verbeteren