Tijdens je reis door deze handleiding zul je waardevolle vaardigheden opdoen om je webprojecten te laten opvallen. En hopelijk zul je ook wat inspiratie opdoen!
\n
Geavanceerde CSS overgangen<\/h2>\n
Geavanceerde CSS overgangen maken UI-elementen interactief, aantrekkelijk en zien er natuurlijk mooi uit. Stel je voor dat je een knop op je site hebt. Normaal gesproken staat hij daar gewoon, maar met CSS overgangen verandert hij soepel van kleur of wordt hij iets groter als iemand er met de muis overheen gaat.<\/p>\n
Het concept draait om het idee van interpolatie – vloeiende overgang tussen verschillende toestanden van een CSS properties.<\/p>\n
Om deze effecten te cre\u00ebren, zijn er verschillende CSS properties waarmee je vertrouwd moet raken:<\/p>\n
- \n
- Overgangsproperties<\/strong>: Deze omvatten het specificeren van de properties die je wilt animeren (zoals
background-color<\/code> ofopacity<\/code>), het instellen van de duur van de overgang en het bepalen van detransition-timing-function<\/code> (zoalsease-in<\/code> oflinear<\/code>), die dicteert hoe de overgang vordert tijdens de duur.<\/li>\n- Timingfuncties<\/strong>: Deze zijn een must omdat ze de versnelling en vertraging van de overgang regelen. Een van de meest veelzijdige opties hier is de functie
cubic-bezier<\/code>. Met deze functie kun je aangepaste snelheidscurves maken, waardoor je volledige controle hebt over het tempo van je overgang. Het kan in het begin een beetje lastig zijn, maar gereedschappen zoals kubus-bezier<\/a> maken het gemakkelijker om deze curven te visualiseren en te maken.<\/li>\n<\/ul>\n![\"cubic-bezier\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/cubic-bezier.png\")
Een voorbeeld van cubic-bezier in actie.<\/figcaption><\/figure>\n Hier is een eenvoudig voorbeeld om te illustreren hoe je dit zou kunnen gebruiken in je CSS:<\/p>\n
.my-element {\n\ntransition-property: opacity;\n\ntransition-duration: 0.5s;\n\ntransition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n\n}\n<\/code><\/pre>\nIn dit fragment verandert
.my-element <\/code>zijn ondoorzichtigheid met een unieke snelheidscurve die wordt gedefinieerd door de functiecubic-bezier<\/code>. Deze curve dicteert een specifiek soort beweging, zoals langzaam beginnen, versnellen en dan weer vertragen naar het einde toe.<\/p>\nDoor
transition-timing-function<\/code> te gebruiken met aangepaste waarden, kun je je webelementen laten bewegen op een manier die natuurlijker, dynamischer of gewoon anders aanvoelt dan standaard. Het is een geweldig hulpmiddel om wat persoonlijkheid en finesse toe te voegen aan je webanimaties.<\/p>\nAls het gaat om geavanceerde technieken, zijn hier een paar om te overwegen:<\/p>\n
- \n
- Combineren van meerdere properties<\/strong>: Waarom genoegen nemen met het animeren van slechts \u00e9\u00e9n ding? Met CSS kun je meerdere properties op een rij zetten en ze allemaal tegelijk animeren. Dit is perfect om lagen toe te voegen aan je animatie.<\/li>\n
- Gesynchroniseerde animaties<\/strong>: Je kunt ook verschillende properties op een rij zetten om in hetzelfde tempo te bewegen, waardoor je een meer geco\u00f6rdineerd effect cre\u00ebert.<\/li>\n
- Nested overgangen<\/strong>: Pas overgangen toe op elementen binnen een container. Op deze manier gedragen de child-elementen zich zoals jij wilt als je interactie hebt met de container.<\/li>\n<\/ol>\n
Zorg ervoor dat deze animaties er niet alleen goed uitzien, maar ook soepel lopen, vooral op minder krachtige apparaten. Het gebruik van properties als
transform<\/code> enopacity<\/code> is een slimme zet omdat ze gemakkelijker zijn voor je browsers en de prestaties niet te veel be\u00efnvloeden.<\/p>\nBovendien helpt de property
will-change<\/code> je browser om zich voor te bereiden op de actie, zodat alles soepel verloopt.<\/p>\nDit is een laatste opmerking om ervoor te zorgen dat dit overal werkt: browsers kunnen kieskeurig zijn. Het gebruik van vendor prefixes helpt ervoor te zorgen dat je coole overgangen werken in verschillende browsers. Het is een beetje extra werk, maar tools zoals autoprefixers<\/a> kunnen dit voor je doen, zodat alles probleemloos verloopt.<\/p>\n
Transformaties in CSS<\/h2>\n
CSS transformaties zijn een geweldige manier om je webontwerpen interessanter te maken. Ze kunnen natuurlijk worden gebruikt om dingen te verplaatsen, maar ze kunnen ook het hele gevoel van een pagina veranderen. De property
transform<\/code> is hier de belangrijkste speler.<\/p>\nDeze is veelzijdig en kan elementen van de ene plek naar de andere verplaatsen, zoals een afbeelding over het scherm schuiven of de grootte ervan veranderen – denk aan iets dichterbij of verder weg laten lijken, net als in- of uitzoomen op een foto. En als je het een beetje gek wilt doen, kun je zelfs elementen laten ronddraaien.<\/p>\n
Echt indrukwekkend wordt het als je 3D transformaties toevoegt aan je pagina. Met functies als
translate3d<\/code>,scale3d<\/code> enrotate3d<\/code> kunnen elementen van het scherm springen en zo een meeslepende ervaring cre\u00ebren in de browser.<\/p>\nNeem bijvoorbeeld het flipping card<\/em> effect. Dit is een grappige functie waarbij de ene kant van een kaart bepaalde informatie toont en wanneer de kaart omdraait, wordt er nieuwe inhoud getoond op de andere kant. Dit interactieve element kan enorm de aandacht van je bezoekers trekken.<\/p>\n
De sleutel tot dit effect is een effectief gebruik van de property
backface-visibility<\/code>. Dit zorgt ervoor dat de achterkant van de kaart verborgen blijft<\/a> totdat het de bedoeling is dat hij gezien wordt.<\/p>\nMaar waarom zou je het hierbij laten? Als je deze transformaties combineert met overgangen en animaties, kun je zoveel meer uit je CSS halen. Je kunt een knop hebben die elegant groter wordt als je er met de muis overheen gaat of een pictogram dat speels over het scherm beweegt. Deze dynamische veranderingen voegen een vloeiende kwaliteit toe aan je webpagina-elementen, waardoor de gebruikerservaring nog boeiender wordt.<\/p>\n
Designmodo biedt verschillende prachtige voorbeelden hiervan. Eerst zie je de CSS voor 3D transformaties<\/a> uitgesplitst. Daarna kun je de code in actie zien<\/a>:<\/p>\n
![\"Designmodo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/designmodo-spinning-donut.png\")
Designmodo biedt een geweldig voorbeeld van 3D transformaties die prachtig werken.<\/figcaption><\/figure>\n Container queries<\/h2>\n
Container queries zijn een ander aspect van CSS dat het ontdekken waard is. Hiermee kun je elementen stijlen op basis van de grootte van hun container in plaats van de hele schermgrootte. Zie het zo: je hebt een doos en je wilt dat de dingen erin er goed uitzien, hoe groot of klein de doos ook is. Container queries zijn daar perfect voor.<\/p>\n
Ze zijn superhandig als je wilt dat verschillende onderdelen van je webpagina, zoals zijbalken of kaarten, er anders uitzien afhankelijk van hoeveel ruimte ze hebben. Elk onderdeel krijgt zijn eigen stijl<\/a>, onafhankelijk van de rest van de pagina.<\/p>\n
Hier volgt een kort overzicht van hoe je ze kunt gebruiken:<\/p>\n
- \n
- Stel de container<\/strong> in<\/strong>: Vertel CSS eerst welk deel van je pagina een container is. Dit doe je met properties als
container-type<\/code> encontainer-name<\/code>.<\/li>\n- Schrijf je queries<\/strong>: Net als media queries, maar dan voor containers. Je schrijft een regel die zegt: “H\u00e9, als mijn container minstens zo breed is, maak dan deze stijlwijzigingen.”<\/li>\n<\/ul>\n
Zo ziet de basiscode hiervoor eruit:<\/p>\n
@container (min-width: 300px) {\n\n.component {\n\n\/* styles *\/\n\n}\n\n}<\/code><\/pre>\nIn dit voorbeeld worden stijlen binnen de klasse
.component<\/code> toegepast wanneer de container een minimale breedte van 300px bereikt.<\/p>\nNu kunnen container queries worden gebruikt in verschillende scenario’s, zoals:<\/p>\n
- \n
- Responsieve zijbalken en footers<\/strong>: De breedte en layout van zijbalken of footers aanpassen op basis van de containergrootte.<\/li>\n
- Responsieve kaarten<\/strong>: Het veranderen van de layout of stijl van kaarten in een grid of flexbox layout op basis van de breedte van hun container.<\/li>\n<\/ul>\n
Hoewel container queries worden ondersteund door de belangrijkste browsers, waaronder Chrome, Firefox, Safari en Edge, is het nog steeds een goede gewoonte om ze te gebruiken als een progressieve verbetering. Begin met basisstijlen voor browsers die geen ondersteuning bieden en verbeter ze voor browsers die container queries ondersteunen.<\/p>\n
Flexbox gebruiken voor verticale uitlijning<\/h2>\n
Flexbox<\/a> is een ongelooflijk handig hulpmiddel in CSS, vooral als het gaat om verticaal uitlijnen. Hoewel het al een tijdje bestaat, is het nog steeds super relevant, vooral voor het uitlijnen van items langs de dwarsas (die, afhankelijk van je layout, verticaal kan zijn).<\/p>\n
Align-items gebruiken voor verticaal uitlijnen<\/h3>\n
Met de property
align-items<\/code> in Flexbox kun je items verticaal uitlijnen binnen een container. Het werkt als je flexbox eenflex-direction<\/code> van rijen heeft. Met deze property kun je bepalen hoe alle children van een flexcontainer worden uitgelijnd langs de dwarsas.<\/p>\nAls je bijvoorbeeld een heleboel items in een flexcontainer hebt en je wilt ze allemaal verticaal gecentreerd hebben, dan gebruik je
align-items: center;<\/code>. Dit zijn de belangrijkste opties die je hebt metalign-items<\/code>:<\/p>\n- \n
flex-start<\/code>: Lijnt items uit aan het begin van de container.<\/li>\nflex-end<\/code>: Lijnt items uit aan het einde van de container.<\/li>\ncenter<\/code>: Centreert items in de container.<\/li>\nbaseline<\/code>: Lijnt items uit op basis van hun basislijn.<\/li>\nstretch<\/code>: Strekt items uit om de container te vullen (standaard gedrag).<\/li>\n<\/ul>\nAlign-self gebruiken voor individuele controle<\/h3>\n
Hoewel
align-items<\/code> geweldig is voor het uitlijnen van alle items in een container, wil je soms slechts \u00e9\u00e9n item anders uitlijnen. Daarom isalign-self<\/code> zo handig. Met deze property kun je de waardealign-items<\/code> overschrijven voor individuele flexitems. Het accepteert dezelfde waarden alsalign-items<\/code>.<\/p>\nStel bijvoorbeeld dat je een flex container hebt met
align-items: center;<\/code>, maar er is \u00e9\u00e9n item dat je aan het begin wilt uitlijnen. Je kuntalign-self: flex-start;<\/code> toepassen op dat specifieke item. Het is een geweldige manier om de uitlijning van individuele items nauwkeurig te regelen.<\/p>\nHet kan echter handig zijn om dit in actie te zien.<\/p>\n
Stel, je ontwerpt een navigatiebalk met een logo, een aantal links en een zoekbalk. Je wilt de links gecentreerd hebben, het logo bovenaan en de zoekbalk onderaan.<\/p>\n
Dit is hoe je het zou kunnen doen:<\/p>\n
.nav-container {\n\ndisplay: flex;\n\nflex-direction: row;\n\nalign-items: center;\n\n}\n\n.logo {\n\nalign-self: flex-start;\n\n}\n\n.search-bar {\n\nalign-self: flex-end;\n\n}<\/code><\/pre>\nIn dit voorbeeld is de
.nav-container<\/code> een flexcontainer waarvan de items over het algemeen gecentreerd zijn. Het logo en de zoekbalk wijken echter af van deze algemene regel en worden respectievelijk aan het begin en het einde van de container uitgelijnd.<\/p>\nModerne kleurfuncties in CSS<\/h2>\n
Moderne kleurfuncties in CSS zijn aanzienlijk ge\u00ebvolueerd en bieden meer verfijnde manieren om kleuren te defini\u00ebren en te manipuleren in webdesign. Laten we eens kijken naar een aantal van deze functies:<\/p>\n
1. rgb() en rgba()<\/h3>\n
De functie
rgb()<\/code> is een traditionele manier om kleuren te defini\u00ebren met behulp van de kanalen Red, Green en Blue. Elk kanaal kan een waarde hebben tussen 0 en 255. De variantrgba()<\/code> voegt een alfakanaal toe voor ondoorzichtigheid, waarbij 1 volledig ondoorzichtig is en 0 volledig transparant.<\/p>\nHet zou er ongeveer zo uit moeten zien:<\/p>\n
.example {\n\ncolor: rgb(255, 0, 0); \/* Red *\/\n\nbackground-color: rgba(255, 0, 0, 0.5); \/* Semi-transparent red *\/\n\n}<\/code><\/pre>\n2. hsl() en hsla()<\/h3>\n
hsl()<\/code> geeft kleuren weer in termen van Hue, Saturation en Lightness, waardoor het intu\u00eftiever wordt om kleurvariaties te selecteren. Net alsrgba()<\/code> bevathsla()<\/code> een alfakanaal voor ondoorzichtigheid. Zoals dit:<\/p>\n.example {\n\ncolor: hsl(120, 100%, 50%); \/* Green *\/\n\nbackground-color: hsla(120, 100%, 50%, 0.3); \/* Semi-transparent green *\/\n\n}<\/code><\/pre>\n3. oklch() en oklab()<\/h3>\n
oklch()<\/code><\/a> enoklab()<\/code> zijn recentere toevoegingen aan de CSS kleurfuncties. Ze zijn gebaseerd op de CIELAB kleurruimte<\/a>, die is ontworpen om perceptueel uniform te zijn. Dit betekent dat veranderingen in kleurwaarden beter overeenkomen met veranderingen die worden waargenomen door het menselijk oog.<\/p>\nNu specifiek:<\/p>\n
- \n
oklab()<\/code> wordt gebruikt voor het defini\u00ebren van kleuren in een perceptueel uniforme ruimte.<\/li>\noklch()<\/code> is vergelijkbaar, maar gebruikt cilindrische co\u00f6rdinaten (lightness, chroma en hue).<\/li>\n<\/ul>\nMet deze functies kun je kleuren nauwkeuriger en intu\u00eftiever manipuleren, vooral voor taken als het maken van vloeiende kleurverlopen. Zo zou dat er in code uit kunnen zien:<\/p>\n
.example {\n\ncolor: oklch(75%, 0.25, 250); \/* A color in oklch *\/\n\nbackground-color: oklab(0.623, 0.172, -0.079); \/* A color in oklab *\/\n\n}<\/code><\/pre>\nGeavanceerde kleurenschema’s gebruiken<\/h3>\n
Met deze functies, vooral de meer geavanceerde
oklch()<\/code> enoklab()<\/code>, kun je ingewikkelde kleurenschema’s implementeren die visueel consistent en aantrekkelijk zijn. Ze bieden meer controle over hoe kleuren worden weergegeven en waargenomen, zodat je ontwerpen zowel esthetisch aantrekkelijk als toegankelijk zijn.<\/p>\nAls je deze kleurfuncties combineert met CSS functies zoals custom properties (CSS variabelen) en berekeningen, kun je dynamische en flexibele kleursystemen ontwikkelen die zich aanpassen aan verschillende thema’s, toestanden en omgevingen.<\/p>\n
Omdat webstandaarden en browserondersteuning voor deze functies blijven veranderen, kan het omarmen van deze moderne kleurfuncties het visuele ontwerp en de gebruikerservaring van je webprojecten aanzienlijk verbeteren.<\/p>\n
Tekst rond afbeeldingen buigen<\/h2>\n
De CSS property
shape-outside<\/code> biedt een creatieve manier om tekst rond afbeeldingen te wikkelen<\/a>, wat bijdraagt aan meer dynamische en visueel interessante layouts en meer geavanceerde styling van afbeeldingen<\/a>.<\/p>\nHiermee kun je een vorm defini\u00ebren waaromheen inline inhoud moet worden gewikkeld. Dit is handig om tekst om afbeeldingen te wikkelen in een niet-rechthoekige vorm, waardoor layouts ontstaan die organischer en visueel boeiender zijn dan de standaard rechthoekige tekstomloop.<\/p>\n
Hoe werkt het?<\/h3>\n
Je kunt verschillende vormen defini\u00ebren, zoals cirkels, ellipsen en veelhoeken, of zelfs het alfakanaal van een afbeelding gebruiken om de vorm te bepalen.<\/p>\n
De property
shape-outside<\/code> is meestal van toepassing op zwevende elementen. En als je een afbeelding zweeft en eenshape-outside<\/code> toepast, wikkelt de tekst eromheen volgens de gedefinieerde vorm.<\/p>\nHier is een eenvoudig voorbeeld van het gebruik van shape-outside met een cirkel:<\/p>\n
.image {\n\nfloat: left;\n\nshape-outside: circle(50%);\n\nwidth: 200px;\n\nheight: 200px;\n\nmargin-right: 15px;\n\n}<\/code><\/pre>\nIn dit voorbeeld wordt de klasse
.image<\/code> toegepast op een afbeeldingselement. Het zweeft naar links en deshape-outside: circle(50%);<\/code> cre\u00ebert een cirkelvorm waar de tekst omheen wikkelt. Het effectieve gebruik vanshape-outside<\/code> kan nieuwe mogelijkheden openen in je ontwerpen, omdat het tekst laat vloeien rond complexe vormen, waardoor het mogelijk wordt om magazine-achtige layouts en visueel rijke webpagina’s te maken.<\/p>\nCSS overvloeimodi<\/h2>\n
CSS overvloeimodi bieden een krachtige manier om kleuren en afbeeldingen te mengen, waardoor unieke visuele effecten ontstaan die ook je ontwerpen kunnen verbeteren. Met deze overvloeimodi kun je boeiende teksteffecten, overlappende afbeeldingen en ingewikkelde achtergrondpatronen maken. Om
background-blend-mode<\/code> te gebruiken, laten we eerst eens bespreken wat het doet. Deze property wordt gebruikt om te defini\u00ebren hoe de achtergrondafbeeldingen en -kleur van een element in elkaar moeten overvloeien. Als je bijvoorbeeld een achtergrondafbeelding en een achtergrondkleur hebt, kun je ze mengen met verschillende overvloeimodi zoals vermenigvuldigen, scherm, overlay, enz. Zo zou de code eruit kunnen zien:<\/p>\n.element {\n\nbackground-image: url('image.jpg');\n\nbackground-color: blue;\n\nbackground-blend-mode: multiply;\n\n}<\/code><\/pre>\nNu werkt
mix-blend-mode<\/code> door de inhoud van een element (inclusief afbeeldingen en tekst) te mengen met de achtergrond. Dit is vooral handig voor teksteffecten<\/a> of het overlappen van een afbeelding over een andere. Zoals dit:<\/p>\n<\n\n.element {\n\nmix-blend-mode: screen;\n\n}<\/code><\/pre>\nPopulaire overvloeimodi<\/h3>\n
Ter referentie zijn hier een paar van de populairste overvloeimodi die je moet kennen om dit effect goed te kunnen gebruiken:<\/p>\n
- \n
- Multiply<\/strong>: Vermenigvuldigt de kleuren van de overvloeilaag en de basislaag, wat resulteert in een donkerdere kleur.<\/li>\n
- Screen<\/strong>: Maakt de kleuren lichter, het tegenovergestelde van vermenigvuldigen. Dit is handig voor het maken van lichteffecten.<\/li>\n
- Overlay<\/strong>: Combineert de mengmodi multiplyen screen. Lichte delen van de afbeelding worden lichter en donkere delen worden donkerder.<\/li>\n
- Darken en lighten<\/strong>: Selecteert respectievelijk de donkerdere of lichtere kleur.<\/li>\n
- Color dodge en color burn<\/strong>: Maak de basiskleur lichter of donkerder om de overvloeikleur te weerspiegelen.<\/li>\n
- Difference en exclusion<\/strong>: Gebruikt voor het maken van meer artistieke en omgekeerde kleureffecten.<\/li>\n<\/ul>\n
Aanpassen aan gebruikersvoorkeuren<\/h2>\n
- Screen<\/strong>: Maakt de kleuren lichter, het tegenovergestelde van vermenigvuldigen. Dit is handig voor het maken van lichteffecten.<\/li>\n
- Responsieve kaarten<\/strong>: Het veranderen van de layout of stijl van kaarten in een grid of flexbox layout op basis van de breedte van hun container.<\/li>\n<\/ul>\n
- Schrijf je queries<\/strong>: Net als media queries, maar dan voor containers. Je schrijft een regel die zegt: “H\u00e9, als mijn container minstens zo breed is, maak dan deze stijlwijzigingen.”<\/li>\n<\/ul>\n
- Gesynchroniseerde animaties<\/strong>: Je kunt ook verschillende properties op een rij zetten om in hetzelfde tempo te bewegen, waardoor je een meer geco\u00f6rdineerd effect cre\u00ebert.<\/li>\n
- Timingfuncties<\/strong>: Deze zijn een must omdat ze de versnelling en vertraging van de overgang regelen. Een van de meest veelzijdige opties hier is de functie