CSS by T. Afif

@ChallengesCss

💡 css-tip.com 🧩 css-shape.com 💫 css-loaders.com 📝 css-articles.com ⚙️ css-generators.com 🏆 css-challenges.com 🎨 css-pattern.com 🎨 css-only.art

💰 Support Me ⮕

support.temani-afif.com

Replies Reposts Media

Pinned
CSS by T. Afif
@ChallengesCss
Apr 15, 2025
If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work! Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.
Advertise with CSS Tip
From css-tip.com
CSS by T. Afif
@ChallengesCss
Sep 9
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. css-tip.com/node-connectio… Look how the lines get distorted! 👀 Another cool demo powered by modern CSS features!
00:00
CSS by T. Afif
@ChallengesCss
Jun 16
00:33
A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connectio… Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀
CSS by T. Afif
@ChallengesCss
Sep 8
Go vote for the border-shape feature. It should be part of Interop 2027! I have a lot of cool demos waiting for better browser support (that I will share anyway in 2026 😅)
CSS ` border-shape` · Issue #1371 · web-platform-tests/interop
From github.com
CSS by T. Afif
@ChallengesCss
Sep 2
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 by T. Afif
@ChallengesCss
Sep 1
Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀 css-tip.com/grid-informati… A fancy demo powered by Scroll-Driven Animations and more! All the values are calculated and displayed using only CSS.
1
CSS by T. Afif
@ChallengesCss
Sep 1
Yes, it's responsive. All the values are updated on screen/container resize!
00:00
CSS by T. Afif
@ChallengesCss
Sep 1
Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀 css-tip.com/grid-informati… A fancy demo powered by Scroll-Driven Animations and more! All the values are calculated and displayed using only CSS.