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

CSS by T. Afif

@ChallengesCss • 14,087 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

💡 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,668 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,924 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,524 views

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,125 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

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

25,194 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

12,022 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,201,004 views • 5 months ago

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀
0:33
ChallengesCss's profile picture

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀

CSS by T. Afif

11,611 views • 1 month 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,412 views • 6 months 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 • 6 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

15,196 views • 3 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,199 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,843 views • 1 year ago

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS
0:23
ChallengesCss's profile picture

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

29,169 views • 3 years 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