css-challenges

← overzicht


CSS challenge: Anchor positioning


Samples

🎯 ⸺ de basics van anchor positining: code & voorbeeld (CodePen 🎠)
🎯 ⸺ anchor() function: code & voorbeeld (CodePen 🎠)
🎯 ⸺ anchor animeren: code & voorbeeld (CodePen 🎠)


Oefeningen

🎯 ⸺ een popover die van kant wisselt indien nodig: code & voorbeeld (CodePen 🎠)

🎯 ⸺ moving focus: code & voorbeeld (CodePen 🎠)

🎯 ⸺ input range met output: code & voorbeeld (CodePen 🎠)

🎯 ⸺ scroll-spy: code & voorbeeld (CodePen 🎠)

🎯 ⸺ carousel buttons en bolletjes: code & voorbeeld (CodePen 🎠)


🎯 ⸺ The CSS anchor positioning API (Una Kravets 🧑‍💻)
🎯 ⸺ Anchor positioning tool (Una Kravets 🧑‍💻)

🎯 ⸺ anchor() (MDN)
🎯 ⸺ anchor-size() (MDN)

🎯 ⸺ Introducing the popover API (Una Kravets 🧑‍💻)

🎯 ⸺ shape(): A New Powerful Drawing Syntax in CSS (Chris Coyier 🧑‍💻)
🎯 ⸺ border-shape: the future of the non-rectangular web (Una Kravets 🧑‍💻)

🎯 ⸺ Creating a scroll-spy with 2 lines of CSS (Una Kravets 🧑‍💻)