Mastodawn

💡 CSS Tip!

Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩

https://css-tip.com/hexagon/

The magic? The new corner-shape property!

Better #CSS Shapes Using shape(), Part 2: More on Arcs: "This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command." https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/

Better CSS Shapes Using shape() — Part 2: More on Arcs | CSS-Tricks

This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command.

CSS-Tricks

💡 CSS Tip!

Do you know safe alignment? It's when you make sure your overflowing content is always fully accessible on scroll regardless of the alignment configuration.

https://css-tip.com/safe-align/

It's not something new but you are probably not aware about it.

Creating Blob Shapes using clip-path: shape(): "Blobs! Gooey weird shapes you can fill with any background and even animate." #CSS https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape/

Creating Blob Shapes using clip-path: shape() – Frontend Masters Blog

Blobs! Gooey weird shapes you can fill with any background and even animate.

CSS by T. Afif

Jun 10

💡 CSS Tip!

Do you know safe alignment? It's when you make sure your overflowing content is always fully accessible on scroll regardless of the alignment configuration.

https://css-tip.com/safe-align/

It's not something new but you are probably not aware about it.

This makes 5 articles about shape() in one month!

Find them all here 👉 https://css-articles.com/

Let's hope Firefox will soon join the game before I write more 🫣

📝 New CSS Article!

Ready for the third part? This time, I am exploring the curve command and how you can easily round the corner of any shape!

https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/

#CSS #HTML

Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.

CSS-Tricks

Show thread

CSS by T. Afif

Jun 6

This makes 5 articles about shape() in one month!

Find them all here 👉 https://css-articles.com/

Let's hope Firefox will soon join the game before I write more 🫣

#CSS #HTML

CSS by T. Afif

Jun 6

📝 New CSS Article!

Ready for the third part? This time, I am exploring the curve command and how you can easily round the corner of any shape!

https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/

#CSS #HTML

Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.

CSS-Tricks

CSS by T. Afif

Jun 6

CSS-Tricks Jun 6

The CSS shape() function's arc and curve commands might produce similar looking results at first glance, but they're quite different and there's a big "it depends" when you use one or the other.

@css with a great explanation and examples, as always:

https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/

Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.

CSS-Tricks

Support Me	https://support.temani-afif.com/
Github	https://github.com/Afif13/
Codepen	https://codepen.io/t_afif
🦋	https://bsky.app/profile/css-only.dev