#Development #Pitfalls
How to correctly use if() in CSS · What can be confusing at first is easy to fix https://ilo.im/164bzl

_____
#ModernCSS #CssIf #CssCalc #Browser #WebDev #Frontend #CSS

#Development #Launches
SVG to CSS Shape Converter · A web tool to transform an SVG shape into a CSS shape https://ilo.im/1642ey

_____
#Shapes #Logo #Converter #SVG #CSS #WebDev #Frontend

@Meyerweb the same apply to the other cases btw. "entry entry" is equivalent to "entry 0% entry 100%" which means when the element "start to enter the view" and when the element "completely entered the view".

you last example "entry 2em exit 2em" is close to "entry 0% exit 0%" which means "when the element start to enter the view" and "when the element start to exit the view". But with an offset of +2em

#SVG to #CSS Shape Converter: "Shape master Temani Afif has gone all-in on the newly-released shape() function which recently rolled out in both Chromium browsers and Safari. That includes a brand-new generator that converts path() shapes in shape() commands instead." https://css-tricks.com/svg-to-css-shape-converter/

@Meyerweb does it help if you know that "entry exit" is the same as "entry 0% exit 100%" ?

> In the case of <timeline-range-name> values that do not include a <length-percentage>, the percentage defaults to 0% if it is an animation-range-start value, and 100% if it is an animation-range-end value.

maybe in the last example you are expecting the behavior of "entry 2em exit calc(100% - 2em)" ?

💡 CSS Tip!

Excited about the new if() function? Learn how to correctly use it before facing a lot of issues (and headaches).

https://css-tip.com/inline-if/

The code below looks straightforward, but there is a hidden gotcha! 🤨

#CSS #HTML

📝 New CSS Article!

The fun continues using shape()!

For this second part, we are drawing more CSS shapes while exploring the arc command. It's a very tricky command if you don't fully understand it.

https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/

#CSS #HTML

The shape() function's arc command is a bit of a head scratcher, but @css breaks it down nicely and demonstrates how to bend it to your will.

https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/

shape() + Anchor Positioning + some magic 🪄

Demo: https://codepen.io/t_afif/full/PwqwOYz via :codepen: @codepen

A CSS-only fancy effect for this week #CodePenChallenge

#CSS #HTML

shape() + Anchor Positioning + some magic 🪄

Demo: https://codepen.io/t_afif/full/PwqwOYz via :codepen: @codepen

A CSS-only fancy effect for this week #CodePenChallenge

#CSS #HTML

📝 New CSS Article!

It's me again exploring the new shape() function! ⭐

This time, I wrote a series of articles to help you understand this new and powerful tool and the first part is live 👇

https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/

#CSS #HTML

📝 New CSS Article!

It's me again exploring the new shape() function! ⭐

This time, I wrote a series of articles to help you understand this new and powerful tool and the first part is live 👇

https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/

#CSS #HTML

Ready to get your hands dirty with the shape() function? @css has a bunch of examples and exercises, starting with lines and arcs, to help you master this new feature.

https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/

💡CSS Tip!

Give a nice visual touch to your broken images. Get rid of the default browser rendering and add your own custom message using CSS.

https://css-tip.com/broken-image/

#CSS #HTML

💡CSS Tip!

Give a nice visual touch to your broken images. Get rid of the default browser rendering and add your own custom message using CSS.

https://css-tip.com/broken-image/

#CSS #HTML

I love using @css's new CSS path-to-shape converter to see shape() commands used in a bunch of different contexts.

https://css-tricks.com/svg-to-css-shape-converter/

Always better with some animation, right?

Demo: https://codepen.io/t_afif/full/azzeOVo via :codepen: @codepen

Keyframes? No, there is no keyframes in the demo 😉

#CSS #HTML

💡 CSS Tip!

Create an arc shape with rounded edges using shape() and arc commands. Another shape made easy using shape() (I know, it's a lot of "shape" in the post 😅)

https://css-tip.com/arc-shape-rounded/

And look at that if() statement 👀

#CSS #HTML

💡 CSS Tip!

Create an arc shape with rounded edges using shape() and arc commands. Another shape made easy using shape() (I know, it's a lot of "shape" in the post 😅)

https://css-tip.com/arc-shape-rounded/

And look at that if() statement 👀

#CSS #HTML

📝 New CSS Article!

The fun continues with the new shape() function. Learn how I made those blob shapes and how you can easily animate them! 🤩

https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape/

Shape generator: https://css-generators.com/blob/

#CSS #HTML