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
Joined April 2021
1,540 Photos and videos
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. css-tip.com/advertise/

Advertise with CSS Tip

Promote your product with a personalised and attractive ad starting from 100$/month.

css-tip.com
5
42
11,620
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
Sep 22
💡CSS Tip! Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes! Let's start with Blobs. css-tip.com/random-blob/ You never see the same shape twice. A unique shape for a unique experience! 👀
9
75
6,658
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
Sep 17
💡 CSS Tip! border-shape + border-area = The perfect combo 🪄 3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀 css-tip.com/gradient-shapes/
Overview of the CSS code from the linked post

ALT Overview of the CSS code from the linked post

Border-only shapes with gradient coloration

ALT Border-only shapes with gradient coloration

2
9
86
5,353
📝 New CSS Article! Learn how I used Scroll-Driven Animations and other modern features to extract various information for a CSS grid. blog.master.dev/extracting-g… Another article to show that CSS is more than a simple set of properties/values.

Extracting Grid Information Using CSS

blog.master.dev
1
2
38
1,862
CSS by T. Afif retweeted
CSS-Tricks
@css
Sep 14
📝 Why CSS-Tricks Has Been Quiet Lately geoffgraham.me/why-css-trick… (cc: @digitalocean @paddix)

Why CSS-Tricks Has Been Quiet Lately - Geoff Graham

Because I haven't published anything to it since August 31. And no one else has either. That's not a super long time to go silent but it is for a site that

geoffgraham.me
6
7
109
26,127
CSS by T. Afif retweeted
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-connection-… Look how the lines get distorted! 👀 Another cool demo powered by modern CSS features!
CSS by T. Afif@ChallengesCss
Jun 16
A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connection/ Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀
8
65
4,577
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 😅) github.com/web-platform-test…

CSS ` border-shape` · Issue #1371 · web-platform-tests/interop

Description CSS border-shape (CSS Borders and Box Decorations Module Level 4) lets authors define an element’s border geometry using values (circle(), ellipse(), polygon(), inset(), shape(), path()...

github.com
5
1,068
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-information… A fancy demo powered by Scroll-Driven Animations and more! All the values are calculated and displayed using only CSS.
A grid of randomly placed items where each one show its own position within the grid

ALT A grid of randomly placed items where each one show its own position within the grid

1
4
24
2,853
Yes, it's responsive. All the values are updated on screen/container resize!
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-information… A fancy demo powered by Scroll-Driven Animations and more! All the values are calculated and displayed using only CSS.
A grid of randomly placed items where each one show its own position within the grid

ALT A grid of randomly placed items where each one show its own position within the grid
12
73
4,508
Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀 css-tip.com/grid-information… A fancy demo powered by Scroll-Driven Animations and more! All the values are calculated and displayed using only CSS.
A grid of randomly placed items where each one show its own position within the grid

ALT A grid of randomly placed items where each one show its own position within the grid

CSS by T. Afif@ChallengesCss
Aug 18
An interactive demo showing how all the values adjust in real time as the grid is resized. codepen.io/t_afif/full/vEgqg… via @CodePen All the values are integers, so you can use counters to display them
2
34
10,180
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
Aug 26
📝 New CSS Article! Do you want to know how I made that cool hover effect? Read my latest article 👇 blog.master.dev/hover-proxim… I am showing you what programming* with CSS looks like when you combine the modern features! *yes, I said the forbidden word

Hover Proximity Using Modern CSS

blog.master.dev
CSS by T. Afif@ChallengesCss
Aug 19
A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩 css-tip.com/hover-proximity/ One fancy demo (among many) we can create using modern CSS.
7
28
2,134
Targeting the elements of the same row and same column; a classic. Demo: codepen.io/t_afif/full/WbRVv… via @CodePen
CSS by T. Afif@ChallengesCss
Aug 19
A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩 css-tip.com/hover-proximity/ One fancy demo (among many) we can create using modern CSS.
1
2
22
2,195
Move away, give me some space to grow! Demo: codepen.io/t_afif/full/YPNmX…
CSS by T. Afif@ChallengesCss
Aug 19
A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩 css-tip.com/hover-proximity/ One fancy demo (among many) we can create using modern CSS.
1
1
12
1,097
CSS by T. Afif retweeted
Adam Argyle
@argyleink
Aug 19
Tiny little stateful viewports broadcasting, lol I love it 🤘💀
CSS by T. Afif@ChallengesCss
Aug 19
A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩 css-tip.com/hover-proximity/ One fancy demo (among many) we can create using modern CSS.
2
20
4,465
A responsive CSS grid, some Scroll-Driven Animations, and a touch of magic. The perfect recipe for a cool CSS-only hover effect! 🤩 css-tip.com/hover-proximity/ One fancy demo (among many) we can create using modern CSS.
1
4
57
12,150
An interactive demo showing how all the values adjust in real time as the grid is resized. codepen.io/t_afif/full/vEgqg… via @CodePen All the values are integers, so you can use counters to display them
CSS by T. Afif@ChallengesCss
Aug 17
💡 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. css-tip.com/grid-information… A handy code to save for (hopefully) the near future.
Overview of the CSS code from the linked post

ALT Overview of the CSS code from the linked post

2
3
40
4,575
💡 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. css-tip.com/grid-information… A handy code to save for (hopefully) the near future.
Overview of the CSS code from the linked post

ALT Overview of the CSS code from the linked post

2
23
146
10,377
Load more