CSS by T. Afif

💡

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

https://t.co/Pvepfg9xvV

[CSS by T. Afif @ChallengesCss]

Always satisfying with more elements!

Looks like the beginning of a physics course 🤓

[CSS by T. Afif @ChallengesCss]

Always satisfying with more elements!

Looks like the beginning of a physics course 🤓

[CSS by T. Afif @ChallengesCss]

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!? 👀

https://t.co/zPkuvQocmB

Probably my new favorite demo, powered by all the cool new stuff. 🤩

[CSS by T. Afif @ChallengesCss]

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!? 👀

https://t.co/zPkuvQocmB

Probably my new favorite demo, powered by all the cool new stuff. 🤩

[CSS by T. Afif @ChallengesCss]

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!? 👀

https://t.co/zPkuvQocmB

Probably my new favorite demo, powered by all the cool new stuff. 🤩

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩

https://t.co/T33119mwNS

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 👀

[CSS by T. Afif @ChallengesCss]

More circles for more fun!

[CSS by T. Afif @ChallengesCss]

More circles for more fun!

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩

https://t.co/T33119mwNS

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 👀

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩

https://t.co/T33119mwNS

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 👀

[CSS by T. Afif @ChallengesCss]

Don't miss my latest article about centering 👇

And while you are at it, explore how alignment works in CSS.

https://t.co/15GQvTlHN7

It's the key to understanding how centering really works

[CSS by T. Afif @ChallengesCss]

Well, I wrote about centering in CSS (yes, centering), and you might learn something new.

https://t.co/U1QcOnjQHq

[CSS by T. Afif @ChallengesCss]

Well, I wrote about centering in CSS (yes, centering), and you might learn something new.

https://t.co/U1QcOnjQHq

[CSS by T. Afif @ChallengesCss]

Well, I wrote about centering in CSS (yes, centering), and you might learn something new.

https://t.co/U1QcOnjQHq

[CSS by T. Afif @ChallengesCss]

@AndrewPrifer border-shape 😉

[CSS by T. Afif @ChallengesCss]

What we can do with modern CSS is impressive! 🤩

A cool demo is in progress. Stay tuned! 👀

[CSS by T. Afif @ChallengesCss]

@developerman063 nope, that curve is pure CSS with 0 internal JS 😉

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Thanks to shape(), you can create any shape, but what about the border-only and cutout variations?

https://t.co/Q5z4kkHnen

Learn how border-shape make it easy. One code and you have the three shape variations!

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Thanks to shape(), you can create any shape, but what about the border-only and cutout variations?

https://t.co/Q5z4kkHnen

Learn how border-shape make it easy. One code and you have the three shape variations!

[Master.dev (Formerly Frontend Masters) @MasterDotDev]

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.

https://t.co/zO5ZDDVV8u

[CSS by T. Afif @ChallengesCss]

The second part is live!

https://t.co/2aZZ0h967w

Learn how to smoothly start/stop infinite animations and make them look more natural and realistic.

[CSS by T. Afif @ChallengesCss]

📝 New CSS article!

I am exploring a few CSS tricks for controlling infinite animations. The first article is live.

https://t.co/C6gK0UIC0A

You will be surprised, but it's all about features that are quite old and widely supported for a while (like animation-composition)

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Create an interactive image slider with speed control using a few lines of code and no image duplication.

https://t.co/UDnWO6FLrr

A CSS-only implementation powered by modern features (shape(), sibling-index()/count(), animation-composition, etc.)

[CSS by T. Afif @ChallengesCss]

@ZahidHa45112113 It's responsive. You can remove the max-width from the container and increase its size and the gap between images will increase.

There is the --n variable that control how many images are visible at the same time. It can be any value between 1 and N-1 (N: total number of images)

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Create an interactive image slider with speed control using a few lines of code and no image duplication.

https://t.co/UDnWO6FLrr

A CSS-only implementation powered by modern features (shape(), sibling-index()/count(), animation-composition, etc.)