Notices by CSS by T. Afif :verified: (css@front-end.social)

While the new attr() feature is great, I have a bad feeling that it will get used the wrong way.

A certain framework might do the below in the future. 😵💫

Yes, it works but it's a very bad idea!

(It can be tested on Chrome V133 Beta)

#CSS #HTML

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 👇

#CSS

🔟 A huge collection of Tooltip/Speech bubble shapes!

100 different shapes made with a single element and modern CSS.

https://css-generators.com/tooltip-speech-bubble/

I also wrote 2 detailed articles (via @smashingmag ) explaining the techniques used to create most of them.

https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/

#CSS

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.

https://css-tip.com/3d-parallax-effect/

8️⃣ Quantity Query Selector

A simple tool to generate your quantity query selector in no time using modern CSS.

https://css-tip.com/quantity-queries/

A small Easter egg 🥚 is hidden there. Can you find it?

#CSS #HTML

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!

https://css-tip.com/element-dimension/

I also wrote a detailed article explaining the magic 🪄

https://frontendmasters.com/blog/how-to-get-the-width-height-of-any-element-in-only-css/

@kaiserkiwi In the other hand, if no one demonstrate the use of new features, the browsers will do nothing. They will act like "It's not an important feature so no need to hurry and implement it".

If a feature is not widely used, it will never become widely supported.

@kaiserkiwi it's not an easy task to talk about support and include videos inside tutorials.

I write many of those tutorials and I consider them "experimental". I may need twice the effort if I had to make them readable everywhere and honestly I don't think it worth it. I'd prefer to use that effort to write another article instead.

Plus they are not really useful at that stage so you can easily skip them until the support is better.

💡 CSS Tip!

A small tool to create a quantity query selector using :has(). Adjust the setting and get your selector in no time! 😎

I am trying a new kind of "interactive CSS Tip". Let me know what you think. 👇

https://css-tip.com/quantity-queries/

#CSS #HTML

Have you ever tried to add a border around your tooltip? It's a pain, right? 🥴

The solution is within my new collection: https://css-generators.com/tooltip-speech-bubble/

Having a border is no longer an issue. You can easily adjust the thickness and the tail position using CSS variables. 🤩

#CSS #HTML

? CSS Pattern!

Demo: https://codepen.io/t_afif/full/NWzEVgW via :codepen: #codepen


More CSS-only Patterns ? https://css-pattern.com

Related article to understand some math behind the wavy lines ? https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/

#CSS