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...

9️⃣ A 3D Parallax Hover Effect I like making cool effects with minimal #CSS code and a single HTML element. My favorite this year is this satisfying 3D effect coded with less than 15 declarations. css-tip.com/3d-parallax-...

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!

5️⃣ CSS-only games with keyboard control Yes, games you can play with your keyboard coded with only #CSS. Mario game or a maze game? Find them within my collection👉 css-games.com I even have an article about them @frontendmasters.com frontendmasters.com/blog/how-key...

3️⃣ The Complex But Awesome #CSS border-image Property This is probably one of my best articles. I explore a very old and underrated property. You can achieve a lot of magic with border-image! www.smashingmagazine.com/2024/01/css-...

2️⃣ Update CSS variables using range slider This one is a real game-changer. With only #CSS, you can use a range slider to update a CSS variable! css-tip.com/css-variable... Imagine all the JavaScript you will no longer need.