Post

It's the end of the year so let's jump back in time and see some of my favorite #CSS stuff! This week I will post (2 posts/day) my personal top 10 of what I shared in 2024 🏆 🧵Don't miss this thread! You can also participate by telling me your favorite CSS thing 👇

🔟 A huge collection of Tooltip/Speech bubble shapes! 100 different shapes made with a single element and modern CSS css-generators.com/tooltip-spee... I also wrote 2 articles (via @smashingmagazine.com) explaining the techniques used to create most of them. smashingmagazine.com/2024/03/mode...

8️⃣ Quantity Query Selector A simple tool to generate your quantity query selector in no time using modern #CSS. css-tip.com/quantity-que... A small Easter egg 🥚 is hidden there. Can you find it?

7️⃣ Getting the Size of an Element A cool (and hacky) experimentation using scroll-driven animation to get the dimension of any element using pure #CSS! css-tip.com/element-dime... I also wrote a detailed article @frontendmasters.com explaining the magic 🪄 frontendmasters.com/blog/how-to-...

6️⃣ Overflow/Scrollbar detection Another experimentation using Scroll-Driven animations. css-tip.com/overflow-det... A few lines of code to detect if your element is overflowing or has a scrollbar. An information you can use to apply specific #CSS anywhere on the page!