28 Geavanceerde CSS3-effecten om uw website te moderniseren

We kunnen veel dingen doen met CSS, zoals mooie effecten creëren, modellen maken, verschillende vormen bouwen enz. Het is tegenwoordig niet moeilijk om een perfecte CSS in uw applicatie te plaatsen. Er zijn duizenden effecten en tutorials beschikbaar op internet en dat is ook nog eens gratis. Het kiezen van de juiste combinatie van ideale effecten is echt een lastige taak en de meeste lijken een beetje achterhaald of ouderwets. We hebben een aantal geweldige CSS3-effecten verzameld  waarmee u uw website een moderne uitstraling kunt geven met een geweldige gebruikerservaring. Je bent vrij om met de code te spelen en geweldige resultaten te genereren.

28. 3D-tekst

Geef uw koptekst een 3D-look met coole lettertypen en verbluffende schaduweffecten.

27. Platte pictogrammen

De pure CSS Iconex Flat Icon Set (4 pictogrammen), ontworpen door Alireza Attari.

26. Kleurenspectrum

Dit is wat je krijgt door kleuren te mengen met box-shadow. Het kleurenspectrum is een progressie tussen drie kleuren.

25. Metro-UI

De Metro-gebruikersinterface, geïnspireerd op het ontwerp van Windows 8, volledig gemaakt met CSS3. De pictogrammen zijn afkomstig uit FontAwesome.

24. Elastische slag

Dit is een elastische lijn van de tekst met een prachtig kleurenschema en de effecten zijn gemaakt met CSS en SVG.

Lees:50+ prachtige typografievoorbeelden ter inspiratie

23. Gelaagde vormen

Prachtige gekleurde plus gelaagde vormen (volledig geschreven in CSS), ontworpen door Snhasani.

22. Spiraalvormige CSS

Een bewolkte spiraalvormige CSS-animatie die kan worden gebruikt als laadpictogram.

21. Tekstanimatie

Yoann creëerde dit geweldige tickereffect met tekstanimatie. Het schakeleffect van het tweede woord ziet er best cool uit.

20. Platte lange schaduw

Dit is de ultieme schaduwmix boordevol vervagingsvariabelen, lange schaduwen en hoekvariabelen.

19. CSS-wezens

De prachtige interactieve pictogrammen volledig gemaakt met HTML en CSS.

18. 3D-omdraaiknop

Een eenvoudige 3D-flip-knop in CSS3 zonder JavaScript en zonder afbeelding.

17. Transformeer tekst met schaduw

Dit is CSS-tekstschaduw, ontworpen met geavanceerde typografische technieken met behulp van lettering.js.

16. CSS Regenboog

Dit is een volledige cirkelregenboog met een eenvoudig zweefeffect.

15. Kleurrijke Glitchy 404

Het verbazingwekkende glitch-effect (plus vibratie) gemaakt met CSS en een beetje JavaScript.

Lezen:100+ creatieve en grappige 404-foutpagina's

14. UI-feedback

Dit zijn een aantal feedbackideeën voor uw knoppen. Dit is slechts een inspiratie om uw front-end UI wat meer dynamiek te geven.

13. Horizontale accordeon

De horizontale accordeon gemaakt met pure CSS. Het bevat elementen (in plaats van afbeeldingen) en het Genericons-lettertype voor de pictogrammen voor sociale netwerken.

12. Cirkelillusie

Een cirkelillusie met Tusi-beweging, ontworpen door Jaime Caballero. Je kunt het gebruiken als laadbalk/pictogram voor pagina's.

11. Secondenteller

Een elegante toonbank, perfect voor 'coming soon'-sjablonen.

Lees:40+ prachtige sjablonen in aanbouw en binnenkort beschikbaar

10. CSS Tekst-FX

Het wordt gemaakt door gedimd licht aan de tekst toe te voegen, waardoor je fragmentarische flitsen krijgt.

9. CSS-menu

Een modern mobiel menu met CSS3-animaties en overgangen.

8. Budgetschuifregelaar

De eenvoudige CSS + jQuery-slider in een 3D-ontwerp, geïnspireerd door Erik Deiner.

7. Geanimeerde tekstschaduw

Dit geanimeerde tekstschaduwpatroon maakt gebruik van -webkit-background-clip:tekst en lineair verloop om gestreepte tekstschaduw te simuleren.

6. CSS Domino-afbeelding met 3D-ondertiteling

Dit is een responsief 3D-zweefeffect met betere semantische opmaak, minder pseudo-elementen en minder CSS.

5. Radioklik door

Een eenvoudige afbeeldingsschuifregelaar met keuzerondjes, volledig geschreven in CSS.

4. Verloopspookknoppen

De Gradient Ghost-knoppen en tekst zijn ontworpen met behulp van randafbeeldingen en kaderschaduwen.

3. Squishy-schakelknoppen

De simulerende, zachte rubberen knoppen, ontworpen door Justin Windle.

Aanbevolen:nieuwe bronnen voor webontwerpers

2. Eenvoudige stapeleffecten

Een reeks schakeleffecten die laten zien hoe u eenvoudige stapeleffecten kunt maken met behulp van perspectief en 3D-transformatie.

1. SpinKit

SpinKit (een verzameling laadindicatoren) gebruikt CSS-animaties om vloeiende en aanpasbare animaties te creëren.

Lees nu:26 moderne jQuery-plug-ins om uw website beter te maken