Articles Tagged border-radius

The first rule of animating on the web: don’t animate width and height. It forces the browser to recalculate a bunch of stuff and it’s slow (or “expensive” as they say). If you can get away with it, animating any transform property is faster (and “cheaper”).

Butttt, transform can be tricky. Check out how complex this menu open/close animation becomes in order to make it really performant. Rik Schennink blogs about another tricky situation: border-radius. When you animate … Read article “Animating CSS Width and Height Without the Squish Effect”

Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so:

.element {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into … Read article “CSS border-radius can do that?”