@ChallengesCss

💡 https://xitter.cf/t.co/xk3TRqX1f1 🧩 https://xitter.cf/t.co/4jGcDxtd38 💫 https://xitter.cf/t.co/lRAAxfrQ09 📝 https://xitter.cf/t.co/oOgtxdf5i9 ⚙️ https://xitter.cf/t.co/UtXPa9iUiT 🏆 https://xitter.cf/t.co/KgsRpeby7Q 🎨 https://xitter.cf/t.co/0bhdtiVFTU 🎨 https://xitter.cf/t.co/sZ8q2fgRBB

 💰 Support Me ⮕
support.temani-afif.com
Joined April 2021
  • Tweets6.1K
  • Following123
  • Followers14K
1.5KMedia
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
1
42
11,770
💡 CSS Tip! random() + shape() + confetti = fancy shape explosion 🎉 css-tip.com/shape-confetti/ A CSS-only fun (and useless) demo powered by modern features.
1
14
754
Confetti Shape Explosion. Good? bad? 👀
1
14
986
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCssOct 19
More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value. curve, wave, zig-zag, arc ... Which one do you prefer? css-tip.com/shaped-range-sli… 0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)
CSS by T. Afif@ChallengesCssJun 23
Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range-sli… Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)
1
7
47
2,104
More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value. curve, wave, zig-zag, arc ... Which one do you prefer? css-tip.com/shaped-range-sli… 0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)
CSS by T. Afif@ChallengesCssJun 23
Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range-sli… Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)
1
7
47
2,104
💡 CSS Tip! Another cool shape that works well with random(): wavy dividers! css-tip.com/random-wavy-shap… Each visitor gets their own wavy shape for a unique experience.
CSS by T. Afif@ChallengesCssSep 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! 👀
1
1
30
1,395
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCssOct 5
📝 New CSS Article! With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count(). Strange? Confusing? What the heck am I talking about?! Read my latest article 👇 blog.master.dev/transferring…

Transferring sibling-count() to a Parent Element

blog.master.dev
5
24
1,405
📝 New CSS Article! With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count(). Strange? Confusing? What the heck am I talking about?! Read my latest article 👇 blog.master.dev/transferring…

Transferring sibling-count() to a Parent Element

blog.master.dev
5
24
1,405
💡 CSS Tip! Want to know how many children your container has? We don't have children-count() yet, but we can implement it using modern CSS! css-tip.com/children-count/ A hacky experiment powered by Scroll-Driven Animations. How would you use it? Share your use cases 👇
2
12
108
4,886
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCssSep 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! 👀
1
9
2
75
8,078
💡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! 👀
1
9
2
75
8,078
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCssSep 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
85
5,414
💡 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
85
5,414
📝 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,891
CSS by T. Afif retweeted
CSS-Tricks
@cssSep 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
6
112
27,052
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCssSep 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@ChallengesCssJun 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,620
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@ChallengesCssJun 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,620
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,083
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@ChallengesCssSep 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,871
Yes, it's responsive. All the values are updated on screen/container resize!
CSS by T. Afif@ChallengesCssSep 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,540
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@ChallengesCssAug 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
1
34
10,242
Load more