🔟 A huge collection of Tooltip/Speech bubble shapes!

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

css-generators.com/tooltip-spe…

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

smashingmagazine.com/2024/03/m…

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

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.

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!

css-tip.com/element-dimension/

I also wrote a detailed article explaining the magic 🪄

frontendmasters.com/blog/how-t…

6️⃣ Overflow/Scrollbar detection

Another experimentation using Scroll-Driven animations.

css-tip.com/overflow-detection…

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!

#CSS #HTML

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/blog/how-k…

4️⃣ Glowing Border Animation

Look how the border smoothly returns to its initial position (choosing the shortest path) when the mouse leaves the element!

css-tip.com/glowing-border/

A single-element implementation powered by modern CSS.

#CSS #HTML

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!

smashingmagazine.com/2024/01/c…

#CSS #HTML

The Complex But Awesome CSS border-image Property — Smashing Magazine

The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for.

^{Smashing Magazine}

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-variables-rang…

Imagine all the JavaScript you will no longer need.

#CSS #HTML