css-challenges

← overzicht

CSS challenge 3: Gradients

🗓️ ⸺ Dinsdag 24 september
⏰ ⸺ 9:30 - ca 11:30 uur
🙋 ⸺ even aanmelden - max 24

📗 ⸺ Gradients intro (pdf 11MB)
📗 ⸺ Custom properties intro (pdf)

Oefening 1: 🤝 Meet the properties

📊 ⸺ 🟦

📙 ⸺ Gradients oefening 1 (pdf)

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

niet meteen spieken 🫣

Oefening 2: 🌈 Gradients galore

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ Gradients oefening 2 (pdf)

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

Oefening 3: 🤹 Animeren met @property

📊 ⸺ 🟥 ⬛️

📙 ⸺ Gradients oefening 3 (pdf)

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

🎯 ⸺ A single div (Lynn Fisher 👸)
🎯 ⸺ CSS patterns (Lea Verou 👸)
🎯 ⸺ CSS patterns (Afif Temani 🤴)
🎯 ⸺ Gradient Generator (www 🧰)

🎯 ⸺ Linear (MDN 🦊)
🎯 ⸺ Repeating-linear (MDN 🦊)
🎯 ⸺ Radial (MDN 🦊)
🎯 ⸺ Repeating-radial (MDN 🦊)
🎯 ⸺ Conic (MDN 🦊)
🎯 ⸺ Repeating-conic (MDN 🦊)

🎯 ⸺ high-def colors and gradients (Adam Argyle 🦖)
🎯 ⸺ high-def gradient generator (Adam Argyle 🦖)

🎯 ⸺ Animeren met @property (Temani Afif 🤴)

This site is open source. Improve this page.