css-challenges

← overzicht

CSS challenge: States van buttons, controls en co (en :has() )

📗 ⸺ States intro (pdf)
📗 ⸺ :has() intro (pdf 1MB)

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ States oefening 1 (pdf)

🧑‍💻 ⸺ Buttons :: voorbeeld :: code voor jou :: uitwerking (CodePen)

🧑‍💻 ⸺ Tekstvelden en co :: voorbeeld :: code voor jou :: uitwerking (CodePen)

🧑‍💻 ⸺ Checkboxes en radio buttons :: voorbeeld :: code voor jou :: uitwerking (CodePen)

🧑‍💻 ⸺ Ranges :: voorbeeld :: code voor jou :: uitwerking (CodePen)

niet meteen spieken 🫣

Oefening 2: 🎉 :has()

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ States oefening 2 (pdf)

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

niet meteen spieken 🫣

Samples

🎯 ⸺ Link states (CodePen 🎠)
🎯 ⸺ 32 Linkjes (CodePen 🎠)
🎯 ⸺ Button states (CodePen 🎠)
🎯 ⸺ 12 Hamburgers (CodePen 🎠)
🎯 ⸺ Input states (CodePen 🎠)
🎯 ⸺ Input met moving label (CodePen 🎠)
🎯 ⸺ Input met icon (CodePen 🎠)
🎯 ⸺ Range (CodePen 🎠)
🎯 ⸺ Select/Dropdown (CodePen 🎠)
🎯 ⸺ Checks en radios (CodePen 🎠)
🎯 ⸺ Forms en fieldsets (CodePen 🎠)

🎯 ⸺ :has() basics (CodePen 🎠)
🎯 ⸺ :has() broertjes (CodePen 🎠)
🎯 ⸺ :has() controls (CodePen 🎠)

🎯 ⸺ Ranges van Ana Tudor (CodePen 🎠)
🎯 ⸺ Ranges stylen (CSS tricks 🪄)

🎯 ⸺ Checks en radios (Sara Soueiden 👸)
🎯 ⸺ Toggle switches (Sara Soueiden 👸)

🎯 ⸺ :has() (Jen Simmons 🦹‍♀️)

This site is open source. Improve this page.