CSS by T. Afif

5

41

10K

CSS by T. Afif@ChallengesCss·2d

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

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·5d

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

English

20

909

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

31

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.1K

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

52

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