CSS by T. Afif's banner
CSS by T. Afif's profile picture

CSS by T. Afif

@ChallengesCss • 14,072 subscribers

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

Shorts

What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀

What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀

12,093 views

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

82,548 views

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

22,277 views

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

57,769 views

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most. Example with position-area: top 👇

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most. Example with position-area: top 👇

22,403 views

A direction-aware and more realistic version.

A direction-aware and more realistic version.

13,620 views

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

12,042 views

Another (cool) demo where I am using the same technique. Demo: via CodePen.IO The border will smoothly stop (always) at the same position on hover. #codepenchallenge

Another (cool) demo where I am using the same technique. Demo: via CodePen.IO The border will smoothly stop (always) at the same position on hover. #codepenchallenge

11,968 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩
0:36
ChallengesCss's profile picture

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩

CSS by T. Afif

1,200,275 views • 3 months ago

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25
ChallengesCss's profile picture

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,193 views • 5 months ago

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.
0:34
ChallengesCss's profile picture

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

14,811 views • 1 month ago

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.
0:22
ChallengesCss's profile picture

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

CSS by T. Afif

25,687 views • 4 months ago

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.
0:29
ChallengesCss's profile picture

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.

CSS by T. Afif

23,181 views • 1 year ago

I made a little tool to better visualize the effect of the new text-box property and also generate the code for you!
0:31
ChallengesCss's profile picture

I made a little tool to better visualize the effect of the new text-box property and also generate the code for you!

CSS by T. Afif

16,547 views • 1 year ago

💡 CSS Tip! A small tool to create a quantity query selector using has(). Adjust the setting and get your selector in no time! 😎 I am trying a new kind of "interactive CSS Tip". Let me know what you think. Link in the reply 👇
0:34
ChallengesCss's profile picture

💡 CSS Tip! A small tool to create a quantity query selector using has(). Adjust the setting and get your selector in no time! 😎 I am trying a new kind of "interactive CSS Tip". Let me know what you think. Link in the reply 👇

CSS by T. Afif

19,823 views • 1 year ago

No more content to load