@ChallengesCss profile picture
CSS by T. Afif @ChallengesCss
Joined April 2021
  • Tweets 6,052
  • Following 123
  • Followers 14,076
1,512 Photos and videos
Pinned Tweet
CSS by T. Afif@ChallengesCss
15 Apr 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. 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
10,907
Working on another type of connection 👀 I think I have found a CSS cheating code "border-shape" 🤩
0:22
CSS by T. Afif@ChallengesCss
May 28
What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by all the cool new stuff. 🤩
0:24
3
27
2,328
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
May 29
Always satisfying with more elements! Looks like the beginning of a physics course 🤓
0:21
CSS by T. Afif@ChallengesCss
May 28
What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by all the cool new stuff. 🤩
0:24
10
30
3,252
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
May 28
What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by all the cool new stuff. 🤩
0:24
CSS by T. Afif@ChallengesCss
May 26
💡 CSS Tip! Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩 css-tip.com/connected-circle… A demo powered by the future of CSS (border-shape, if(), anchor position, etc). Update your Chrome and play with it! Stay tuned for more complex connections 👀
0:21
8
38
9,543
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
May 26
More circles for more fun!
0:32
CSS by T. Afif@ChallengesCss
May 26
💡 CSS Tip! Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩 css-tip.com/connected-circle… A demo powered by the future of CSS (border-shape, if(), anchor position, etc). Update your Chrome and play with it! Stay tuned for more complex connections 👀
0:21
1
2
19
3,069
💡 CSS Tip! Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩 css-tip.com/connected-circle… A demo powered by the future of CSS (border-shape, if(), anchor position, etc). Update your Chrome and play with it! Stay tuned for more complex connections 👀
0:21
11
83
11,733
Don't miss my latest article about centering 👇 And while you are at it, explore how alignment works in CSS. css-tip.com/explore/alignmen… It's the key to understanding how centering really works

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!

css-tip.com
CSS by T. Afif@ChallengesCss
May 22
Well, I wrote about centering in CSS (yes, centering), and you might learn something new. css-tricks.com/the-state-of-…
3
9
1,463
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
May 22
Well, I wrote about centering in CSS (yes, centering), and you might learn something new. css-tricks.com/the-state-of-…

The State of CSS Centering in 2026 | CSS-Tricks

Despite the countless number of online resources, it’s easy to get confused when trying to center an element. There are documented solutions, but do you really understand why the code you picked...

css-tricks.com
10
39
4,329
What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀
0:14
9
10
144
12,122
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
May 19
đź’ˇ CSS Tip! Thanks to shape(), you can create any shape, but what about the border-only and cutout variations? css-tip.com/shape-variation/ Learn how border-shape make it easy. One code and you have the three shape variations!
Three shape variations (filled, border-only, and cutout)

ALT Three shape variations (filled, border-only, and cutout)
10
59
2,642
CSS by T. Afif retweeted
Master.dev (Formerly Frontend Masters)
@MasterDotDev
May 15
How to Control Infinite CSS Animations (Part 2 of 2) This time we get into very smooth starts and stops for infinite animations using CSS. One of the tricks is layering on a transition on top of an animation. frontendmasters.com/blog/how…

How to Control Infinite CSS Animations (Part 2 of 2)

frontendmasters.com
2
20
2,764
The second part is live! frontendmasters.com/blog/how… Learn how to smoothly start/stop infinite animations and make them look more natural and realistic.
0:13
CSS by T. Afif@ChallengesCss
May 8
📝 New CSS article! I am exploring a few CSS tricks for controlling infinite animations. The first article is live. frontendmasters.com/blog/how… You will be surprised, but it's all about features that are quite old and widely supported for a while (like animation-composition)
4
36
3,000
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
May 13
💡 CSS Tip! Create an interactive image slider with speed control using a few lines of code and no image duplication. css-tip.com/interactive-slid… A CSS-only implementation powered by modern features (shape(), sibling-index()/count(), animation-composition, etc.)
0:23
1
9
69
2,548
CSS by T. Afif retweeted
Web Standards@webstandardsdev
May 11
How to control infinite CSS animations. In part 1 of 2, @ChallengesCss shows how to speed up, slow down, and reverse infinite CSS animations on demand using animation-composition, CSS variables, and abs() and sign() functions. #css #animation frontendmasters.com/blog/how…
“How to Control Infinite CSS Animations” title with Temani Afif’s name and avatar in a cap, next to three circular loader spinners: sharp purple, blurred middle, and faded cyan.

ALT “How to Control Infinite CSS Animations” title with Temani Afif’s name and avatar in a cap, next to three circular loader spinners: sharp purple, blurred middle, and faded cyan.
3
14
1,005
CSS by T. Afif retweeted
CSS by T. Afif@ChallengesCss
May 8
📝 New CSS article! I am exploring a few CSS tricks for controlling infinite animations. The first article is live. frontendmasters.com/blog/how… You will be surprised, but it's all about features that are quite old and widely supported for a while (like animation-composition)

How to Control Infinite CSS Animations (Part 1 of 2)

frontendmasters.com
9
50
5,160
Load more