Adding another responsive hexagon grid

Demo: codepen.io/t_afif/full/... via @codepen.io

Using 3 Circles

Demo: codepen.io/t_afif/full/... via @codepen.io

💡CSS Tip!

Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀

css-tip.com/connected-ci...

Another cool demo powered by the future of CSS.

💡 CSS Tip!

Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!

css-tip.com/hexagon-grid/

Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)

Ready for the first cool demo of the year?

A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀

Demo: codepen.io/t_afif/full/... via @codepen.io

✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript

A Chrome-only experimentation using modern CSS.

📝 The last CSS Article of the year!

Detailing another cool demo using modern CSS features.

css-tricks.com/responsive-l...

Enjoy!

Only two circles? No, you can have as many circles as you want. Simply add as many circles/connections as you want in the HTML (No need to touch the CSS code).

Demo: codepen.io/t_afif/full/... via @codepen.io

💡 CSS Tip!

Two circles, one arrow, and CSS magic. 🪄

A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩

css-tip.com/connected-ci...

The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).

📝 New CSS Article!

Learn how I made that responsive list of overlapping images using modern CSS.

css-tricks.com/responsive-l...

A perfect use case for the new sibling-index() and sibling-count() functions.

Playing with Anchor Positioning and modern CSS. The arrow is controlled using only CSS 👀

A cool demo in progress ...

An animated version because why not. Still no HTML elements!

Demo: codepen.io/t_afif/full/... via @codepen.io

They said Fizz Buzz using CSS (and HTML), but what about a pure CSS version with no HTML? It's possible!

css-tip.com/fizz-buzz/

A fun CSS-only experiment using modern features.

💡 CSS Tip!

Another classic component made easy using corner-shape. A gallery of skewed images with a hover effect.

css-tip.com/skewed-images/

It can be done with old features, but this one is direction-aware! One code for both directions (left-to-right and right-to-left)

if you keep the normal value as the alignment value `place-self: normal`.

Here are the 4 values you want
position-area: span-top span-left;
position-area: span-top span-right;
position-area: span-bottom span-left;
position-area: span-bottom span-right;

I also made an interactive demo with all the possible positions:

css-tip.com/position-area/

And I am using it myself to rapidly copy/paste the value 😅

💡 CSS Tip!

A direction-aware arrow is good, but what about a generic way to make any CSS Shapes direction-aware? It's possible!

css-tip.com/direction-aw...

The code is simple and doesn't require any modern features, so it's well-supported.

An interactive demo: codepen.io/t_afif/full/... via @codepen.io