css-challenges

← overzicht


CSS challenge 15: Stuck, snapped, scrollable (en carousels)

🗓️ ⸺ dinsdag 3 juni
⏰ ⸺ 9:30 - ca 11:30 uur
🙋 ⸺ even aanmelden - max 24


Samples

🎯 ⸺ een stuck voorbeeld (CodePen 🪠)

🎯 ⸺ de gesnapte img wordt groter (CodePen 🧲)
🎯 ⸺ de gesnapte h2 veert omhoog (CodePen 🧲)

🎯 ⸺ carousel basics (CodePen 🎠)
🎯 ⸺ carousel met anchor positioning (CodePen 🎠)


Oefening 1 - 🪠 Stuck

Bekijk de samples (of de bronnen) en maak de gegeven stuck’s na.

🧑‍💻 ⸺ stuck header: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ stuck headings: Voorbeeld & Code voor jou (CodePen)


Oefening 2 - 🧲 Snapped

🧑‍💻 ⸺ flipping heading: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ grayscale en co: Voorbeeld & Code voor jou (CodePen)


🧑‍💻 ⸺ de list uit de carousel gallery: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ de hero slider uit de carousel gallery: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ de hubs uit de carousel gallery: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ de product uit de carousel gallery: Voorbeeld & Code voor jou (CodePen)


🎯 ⸺ CSS scroll-state() (Adam Argyle 🧑‍💻)

🎯 ⸺ Carousels with CSS (Adam Argyle 🧑‍💻)
🎯 ⸺ CSS Carousel Configurator (Adam Argyle 🧑‍💻)
🎯 ⸺ CSS Carousel Gallery (Adam Argyle 🧑‍💻)

🎯 ⸺ Are ‘CSS Carousels’ accessible? → not yet (Sara Soueidan 🧑‍💻)

🎯 ⸺ Anchor positioning tool (Una Kravets 🧑‍💻)