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
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.
CSS shadow generator
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.
CSS curve generator
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.
CSS easing gradient generator
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.
CSS animatie generator
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.
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.
CSS font scale generator
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.
