css-challenges

← overzicht

CSS challenge: kleurtjes

📗 ⸺ colors intro (pdf 3MB)
📗 ⸺ lightdark intro (pdf 1MB)

🧑‍💻 ⸺ LightDark sample (CodePen)
🧑‍💻 ⸺ Color icons sample (CodePen)

Oefening 1: 🎨 colors

Maak de blokes na. Oefenen met high-def colors en gradients (en @supports en @media).

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld/Uitwerking (CodePen)

Oefening 2: 🌈 (moving) gradients

Bewegende gradients en borders.

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld/Uitwerking (CodePen)

Oefening 3: 🤪 Omdat het kan

Lekker de grenzen verkennen.

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld/Uitwerking (CodePen)

Oefening 4: 🐼 Lightdark challenge

Maak iets moois (of beter, maak wat heel lelijks :).

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Lelijk voorbeeld (CodePen)

🎯 ⸺ A pragmatic guide to modern CSS colours (kevin powell 🧑‍💻)

🎯 ⸺ oklch mixer (evil martians 🧑‍💻)
🎯 ⸺ color-mix (developer.chrome.com 🦖)
🎯 ⸺ animate gradients (css tricks 🪄)
🎯 ⸺ @property (MDN 🦊)
🎯 ⸺ border-image (css tricks 🪄)

🎯 ⸺ light en dark met radio buttons (web.dev 🦖)

This site is open source. Improve this page.