CSS by T. Afif

5

41

10.1K

CSS by T. Afif@ChallengesCss·6h

I thought I had found a bug that prevented counter() from working properly, but it was a feature! css-tip.com/counter-gotcha/ Another CSS gotcha that you'd better know about if you don't want to waste time trying to figure out why your code isn't working.

English

2

20

1.4K

CSS by T. Afif@ChallengesCss·1d

📝 New CSS Article! If you have seen my graph theory demo and wondered how it works, then the article is finally live! frontendmasters.com/blog/two-circl… I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm. Modern CSS is fun!

English

6

33

2.8K

CSS by T. Afif@ChallengesCss·1d

@Una The article is finally here👇 x.com/ChallengesCss/…

📝 New CSS Article! If you have seen my graph theory demo and wondered how it works, then the article is finally live! frontendmasters.com/blog/two-circl… I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm. Modern CSS is fun!

English

2

118

Una 🇺🇦@Una·17 Ara

@ChallengesCss I need a 30-minute explainer on how you're doing the collision detection bc this is *wild*!

English

2

0

14

2.1K

CSS by T. Afif@ChallengesCss·16 Ara

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

English

3

27

234

82.5K

CSS by T. Afif@ChallengesCss·18 Mar

💡 CSS Tip! Add an infinite wobbling animation to your image with a simple code. css-tip.com/wobbling-anima… Powered by "complex" shape()s that you can easily get from my online generator!

It's live! A new CSS generator of fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well! css-generators.com/fancy-frame/ It's responsive and works with any elements, including images. Show me your best frame 👇

English

5

36

1.9K

CSS by T. Afif@ChallengesCss·9 Mar

And I know most of you are looking for the hexagon shape, so in addition to the generator, here is another code with CSS variables to easily control the radius and the rotation. css-tip.com/rounded-hexago… Yes, you can have cool hover effects and animations!

Now that shape() is available in all major browsers, let me remind you that you can use my online generator to create any polygon with ... rounded corners! css-generators.com/polygon-shape/ Adjust the setting, then copy the code.

English

4

28

1.9K

CSS by T. Afif@ChallengesCss·15 Mar

It's been a while since my last CSS Pattern, so let's work on new ones! css-pattern.com/circles-pills/

English

20

931

CSS by T. Afif@ChallengesCss·12 Mar

A classic rounded button: boooring!! 🥱 A squishy animated button: Yes, please!! 🤩 css-tip.com/squishy-button/ Another cool demo powered by the powerful shape() function

English

4

32

2.7K

CSS by T. Afif@ChallengesCss·9 Mar

Now that shape() is available in all major browsers, let me remind you that you can use my online generator to create any polygon with ... rounded corners! css-generators.com/polygon-shape/ Adjust the setting, then copy the code.

English

6

61

5.2K

CSS by T. Afif@ChallengesCss·6 Mar

border-shape is going to be a lot of fun! 👀 Stay tuned ...

English

2

3

60

2.4K

CSS by T. Afif@ChallengesCss·5 Mar

Here is a @CodePen demo to compare the shape() implementation with the corner-shape one. Very close to each other. codepen.io/t_afif/pen/Kwg…

It appears that I accidentally implemented the Squircle shape with my new generator! 👀 I extracted the code and added a variable to easily control the radius. css-tip.com/squircle/

English

2

26

2.9K

CSS by T. Afif@ChallengesCss·5 Mar

@nomsternom @CodePen Actually, it was a nice accident 😅 The math logic I defined to create that fancy frame generator gave me a good-looking squircle, and I was surprised by how close it was!

English

0

1

53

Noam Rosenthal 🦋 nomster.bsky.social@nomsternom·5 Mar

@ChallengesCss @CodePen By using the formula here: codepen.io/noamr-the-sele… you can simulate all the corner-shape values and not just squircle, if you wish. It can be a polyfill of sorts, though it doesn't work the same way for borders/shadows etc until we have border-shape.

English

0

3

102

CSS by T. Afif@ChallengesCss·5 Mar

It appears that I accidentally implemented the Squircle shape with my new generator! 👀 I extracted the code and added a variable to easily control the radius. css-tip.com/squircle/

It's live! A new CSS generator of fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well! css-generators.com/fancy-frame/ It's responsive and works with any elements, including images. Show me your best frame 👇

English

15

4.6K

CSS by T. Afif@ChallengesCss·4 Mar

Demo: codepen.io/t_afif/full/og… via @CodePen

It's live! A new CSS generator of fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well! css-generators.com/fancy-frame/ It's responsive and works with any elements, including images. Show me your best frame 👇

Español

5

28

1.8K

CSS by T. Afif retweetledi

CSS by T. Afif@ChallengesCss·3 Mar

It's live! A new CSS generator of fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well! css-generators.com/fancy-frame/ It's responsive and works with any elements, including images. Show me your best frame 👇

Rounding the corners and it's almost ready! 😁 Now I need to find a name for it ... what I hate the most 😑 Open to suggestions 👇

English