CSS by T. Afif's banner

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 görüntüleme

💡 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 görüntüleme

💡 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 görüntüleme

💡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 görüntüleme

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 görüntüleme

A direction-aware and more realistic version.

A direction-aware and more realistic version.

13,620 görüntüleme

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 görüntüleme

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 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

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

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

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🤩

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🤩

1,200,275 görüntüleme • 3 ay önce

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.

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.

36,193 görüntüleme • 5 ay önce

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.

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.

14,811 görüntüleme • 1 ay önce

💡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 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.

25,687 görüntüleme • 4 ay önce

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

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

23,181 görüntüleme • 1 yıl önce

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

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

16,547 görüntüleme • 1 yıl önce

💡 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 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 👇

19,823 görüntüleme • 1 yıl önce

Daha fazla içerik yok.