Hover Proximity (is this naming a thing, or did I just coin it?!) in pure CSS 👀 Another cool demo powered by modern CSS in progress

The same trick using border-image

💡 CSS Tip! Save this code for the future. It's another way to create that famous breakout effect. A strange code, right? Learn how it works 👇 css-tip.com/breakout-bac... Until better support for border-shape, you will find another way using border-image.

One of my favorite task is creating multi-line responsive ribbon shapes using "lh" and gradients! 😁 css-tip.com/multi-line-r... css-tip.com/multi-line-r...

Yes, and you can simplify like below by using "," inside var() to avoid the empty init. but I'd rather use the supported methods instead of the progressive enhancement. We can create almost all the rounded shapes with shape() or gradients

💡 CSS Tip! After corner-shape, shape(), and border-shape, another feature is available to play with: rounding polygons. css-tip.com/rounded-shap... You create a polygon, add a radius value at the beginning, and you have a shape with rounded corners!

Ok I got the idea. It reminds me a few clamp() I was using as "toggles" between two random values which is similar to your idea.

Is there a way to apply the layout to all the pens? I want it to be always Right but it seems it's not a global setting. Even when making a template, it doesn't work.

💡 CSS Tip! Creating ASCII art is cool, but making it responsive is better! 🤩 css-tip.com/ascii-art/ Now it's possible using the new text-fit property. A simple code and you are done.

Here is my idea of the animated Grid layout No View Transitions, No JS, and no Anchor Positioning. You get an animation on resize and when adding/removing new items. css-tip.com/animated-grid/

And guess what? You can combine border-area with text, and you get the gradient on both the border and the text! 👀 css-tip.com/background-c... Yes, two values for background-clip.

They just released @developer.chrome.com V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. css-tip.com/border-gradi... Two lines of code and you are done! 🤩

To avoid any confusion, let's add a tooltip showing the current value. An ugly one that bounces in all directions! css-tip.com/wiggly-range... Now, the range slider is perfect, no one can say otherwise!

💡 CSS Tip! An old design pattern solved by a modern CSS feature. css-tip.com/responsive-s... Learn how Gap Decorations makes it easy to add a separator between items using simple code with no hacks. It works with different alignment settings, and you can easily adjust the shape as well.

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range... Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

Spotted my avatar and my (silly) demo presented by @jakearchibald.com 👀 cssday.nl/2026/pix/pho... I am wondering what people are thinking at that moment? 😅

Only two elements to better see what's going on. Demo: codepen.io/t_afif/full/... via @codepen.io

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

That's the name I want to avoid. It's a graph, yes, that's clear, but I am looking for the name people would use if they used that graph to create stuff like below.

How do people call the diagram below? What's the most famous/common name for it?

Working on another type of connection 👀 I think I have found a CSS cheating code "border-shape" 🤩

Probably not a bug at the end based on: www.w3.org/TR/css-value... I tried forcing a calculation and it doesn't work as well: codepen.io/t_afif/pen/v...

Always satisfying with more elements! Demo: codepen.io/t_afif/full/... via @codepen.io Looks like the beginning of a physics course 🤓

What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by the modern features. CSS is awesome! 😍

If you keep telling your 3yo child "There are two p's" in every word, he will keep repeating it to everyone. That's what they call "training". But who trust a 3yo child anyway ...

More circles for more fun! Demo: codepen.io/t_afif/full/... via @codepen.io

💡 CSS Tip! Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩 css-tip.com/connected-ci... A demo powered by the future of CSS (border-shape, if(), anchor position, etc). Update your Chrome and play with it! Stay tuned for more complex connections 👀

What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀

💡 CSS Tip! Thanks to shape(), you can create any shape, but what about the border-only and cutout variations? css-tip.com/shape-variat... Learn how border-shape make it easy. One code and you have the three shape variations!

The second part is live! frontendmasters.com/blog/how-to-... Learn how to smoothly start/stop infinite animations and make them look more natural and realistic.