CSS by T. Afif (@ChallengesCss) header
CSS by T. Afif (@ChallengesCss) profile picture

CSS by T. Afif

@ChallengesCss

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

 💰 Support Me ⮕
support.temani-afif.com
Joined April 2021
  • Tweets6.1K
  • Following123
  • Followers14K
1.5KMedia
Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)Photo by CSS by T. Afif (@ChallengesCss)
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

Advertise with CSS Tip

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

css-tip.com
5
1
42
11,790
Maybe the connector below is more robust? Still not...
CSS by T. Afif (@ChallengesCss) profile pictureCSS by T. Afif@ChallengesCss11h
Bending and stretching a line is good, but let's try something more mechanical: a foldable Zig-Zag connector. css-tip.com/zig-zag-connecto… Be careful, it's not as robust as a stretchy line, so don't ... too late, it's broken now 😣 A CSS-only low-quality connector 🫠
322
Bending and stretching a line is good, but let's try something more mechanical: a foldable Zig-Zag connector. css-tip.com/zig-zag-connecto… Be careful, it's not as robust as a stretchy line, so don't ... too late, it's broken now 😣 A CSS-only low-quality connector 🫠
CSS by T. Afif (@ChallengesCss) profile pictureCSS by T. Afif@ChallengesCssMay 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. 🤩
1
1
9
848
📝 New CSS Article! Learn how I combined Anchor Positioning, border-shape, and other modern CSS features to create the connection below. blog.master.dev/two-circles-… That's the simplest example. Another article will cover more complex ones! The future of CSS is awesome. 🤩
6
35
1,369
CSS by T. Afif retweeted
CSS by T. Afif (@ChallengesCss) profile picture
CSS by T. Afif@ChallengesCssOct 28
💡 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
1
17
1,127
💡 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
1
17
1,127
Confetti Shape Explosion. Good? bad? 👀
1
14
1,005
CSS by T. Afif retweeted
CSS by T. Afif (@ChallengesCss) profile picture
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 (@ChallengesCss) profile pictureCSS 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,108
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 (@ChallengesCss) profile pictureCSS 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,108
💡 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 (@ChallengesCss) profile pictureCSS 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,398
CSS by T. Afif retweeted
CSS by T. Afif (@ChallengesCss) profile picture
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

Transferring sibling-count() to a Parent Element

blog.master.dev
5
24
1,411
📝 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

Transferring sibling-count() to a Parent Element

blog.master.dev
5
24
1,411
💡 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 👇
Image from CSS by T. Afif (@ChallengesCss)
2
12
108
4,893
CSS by T. Afif retweeted
CSS by T. Afif (@ChallengesCss) profile picture
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,085
💡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,085
CSS by T. Afif retweeted
CSS by T. Afif (@ChallengesCss) profile picture
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,420
💡 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,420
📝 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

Extracting Grid Information Using CSS

blog.master.dev
1
2
38
1,892
CSS by T. Afif retweeted
CSS-Tricks (@css) profile picture
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

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,100
CSS by T. Afif retweeted
CSS by T. Afif (@ChallengesCss) profile picture
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 (@ChallengesCss) profile pictureCSS 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,623
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) profile pictureCSS 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,623
Load more