RE: https://front-end.social/@css/117234924902143932

If you want such demo to be well supported, give your vote 👇

Ready for another CSS-only diagram? This time, I am trying another connector type. It sticks to the selected sides, regardless of the node's position.

https://css-tip.com/node-connection-2/

Look how the lines get distorted! 👀

Another cool demo powered by border-shape, anchor position, and more!

#CSS #HTML

Go vote for the border-shape feature. It should be part of the Interop 2027!

I have a lot of cool demos waiting for better browser support (that I will share anyway in 2026 😅)

https://github.com/web-platform-tests/interop/issues/1371

#CSS #HTML

Go vote for the border-shape feature. It should be part of the Interop 2027!

I have a lot of cool demos waiting for better browser support (that I will share anyway in 2026 😅)

https://github.com/web-platform-tests/interop/issues/1371

#CSS #HTML

Combining the content property with if() is pretty handy for conditionally displaying information.

If an element spans one column or one row, don't show the "end" value

#CSS #HTML

Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀

https://css-tip.com/grid-information-2/

A fancy demo powered by Scroll-Driven Animations and more!

All the values are calculated and displayed using only CSS.

#CSS #HTML

Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀

https://css-tip.com/grid-information-2/

A fancy demo powered by Scroll-Driven Animations and more!

All the values are calculated and displayed using only CSS.

#CSS #HTML

I think we missed the opportunity to call it "grid-col" instead of "grid-column" to have ... better-written code and avoid adding extra spaces to align it with "grid-row"

I know I am not alone in the side quest of having the values as aligned as possible 🙃

#CSS #HTML

📝 New CSS Article!

Do you want to know how I made that cool hover effect? Read my latest article 👇

https://blog.master.dev/hover-proximity-using-modern-css/

I am showing you what programming* with CSS looks like when you combine the modern features!

*yes, I said the forbidden word

#CSS #HTML

📝 New CSS Article!

Do you want to know how I made that cool hover effect? Read my latest article 👇

https://blog.master.dev/hover-proximity-using-modern-css/

I am showing you what programming* with CSS looks like when you combine the modern features!

*yes, I said the forbidden word

#CSS #HTML

Did anyone already mention "Dark mode with spotLight"? No!? That's the only valid way.

Demo: https://codepen.io/t_afif/pen/YPZzrMP via :codepen: @codepen

Debating about toggles? Well, I don't understand ...

#CSS #HTML

Targeting the elements of the same row and same column; a classic.

Demo: https://codepen.io/t_afif/full/WbRVvdz

#CSS #HTML

Move away, give me some space to grow!

Demo: https://codepen.io/t_afif/full/YPNmXEq

#CSS #HTML

A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩

https://css-tip.com/hover-proximity/

One fancy demo (among many) we can create using modern CSS.

#CSS #HTML

A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩

https://css-tip.com/hover-proximity/

One fancy demo (among many) we can create using modern CSS.

#CSS #HTML

An interactive demo showing how all the values adjust in real time as the grid is resized.

https://codepen.io/t_afif/full/vEgqgob

All the values are integers, so you can use counters to display them

#CSS #HTML

💡 CSS Tip!

Using modern CSS, it is now easy to extract information from a responsive grid. You can get the number of columns, the number of rows, and item coordinates.

https://css-tip.com/grid-information/

A handy code to save for (hopefully) the near future.

#CSS #HTML

💡 CSS Tip!

Using modern CSS, it is now easy to extract information from a responsive grid. You can get the number of columns, the number of rows, and item coordinates.

https://css-tip.com/grid-information/

A handy code to save for (hopefully) the near future.

#CSS #HTML

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

#CSS #HTML

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

#CSS #HTML