Home » Blog » De handigste CSS generators op een rij

De handigste CSS generators op een rij

laptop met css code

Elke front-end developer heeft CSS in zijn of haar gereedschapskist zitten. Het is een belangrijke markup-taal om een website er fatsoenlijk uit te laten zien. Toch is het vaak een echte pain in the ass om de juiste waardes te vinden voor zaken als dropshadows en border radius.

Gelukkig zijn er een heleboel free-to-use generators op het web voor dit soort dingen. Dus om het leven van elke front-end developer een stukje makkelijker te maken heb ik een overzicht gemaakt van de handigste CSS generators.

CSS shape generator

Clippy

In CSS kan je gebruik maken van de clip-path eigenschap om de meest complexe vormen neer te zetten. Des te complexer zo’n vorm, de moeilijker het wordt om de juiste waardes van deze eigenschap te vinden. Daarom maak ik vaak gebruik van Clippy. Met deze gratis tool is het eenvoudig om welke vorm dan ook te maken.

voorbeeld van clippy clip-path generator

CSS shadow generator

SmoothShadow

Anno 2021 maken verreweg de meeste web designs gebruik van schaduwen. Het verschil in een prachtige en oerlelijke schaduw op een element is vaak erg subtiel, en maakt het dus lastig om de gewenste waardes te vinden. De tool SmoothShadow is het handigst om hiervoor te gebruiken, doordat het een groot aanbod heeft van opties, zoals de alfa-, offset- en blurwaardes.

voorbeeld van smoothshadow generator

CSS curve generator

Cubic-bezier

Voor een front-end developer is het niet eenvoudig om een animatie precies te maken zoals je het in gedachte had. Vaak klopt de timing niet, of is het net iets te houterig voor het gevoel. Met de CSS generator Cubic-bezier kan je aan de hand van live voorbeelden zien hoe de animatie curve vertaalt naar een bewegend element.

voorbeeld van css curve generator

CSS easing gradient generator

Easing Gradients

Het gebruik van color gradients is een trend die vrij recent weer een opmars maakt. Vaak wordt er in designs dan gekozen voor linear gradients. Ik ben zelf van mening dat easing gradients nét iets mooier zijn. Dat is de reden dat ik zelf gebruik maak van deze Easing Gradients tool.

verschil tussen easing en linear gradient

CSS animatie generator

Keyframes

Ik heb het al gezegd, animaties zijn niet eenvoudig. Gelukkig is er een tool om elke front-end developer dit wat makkelijker te maken. Keyframes is een initiatief die gebruikers de mogelijkheid geeft om simpele CSS animaties te maken. Door de simpele en minimalistische interface is het relatief snel te begrijpen.

voorbeeld van de keyframes animatie generator

Animista

Een andere CSS generator waar ik vaak gebruik van maak is Animista. Deze tool bevat een gehele library aan verschillende animaties en CSS effecten. Zodra je klaar bent met het in elkaar zetten van de animatie, genereer je de code van de door jou gemaakte animatie.

voorbeeld van de animista generator

CSS font scale generator

Type-Scale

Het is van belang dat de teksten en headers op een website juiste verhoudingen hebben als het gaat om de grootte van het lettertype. Type-Scale is een van de CSS generator die front-end developers en web designers helpen met het kiezen van deze verhoudingen. Je kan hiermee eenvoudig alle CSS code genereren om deze verhoudingen op een website te implementeren.

voorbeeld van de type scale generator

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *