And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.
Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!
#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.
DON'T use layered text-shadows for text outlines just because text-stroke is broken (https://mastodon.social/@anatudor/112410224855133935), they are going to produce ugly corners, thickened roundings and angled lines.
DO: use `paint-order: stroke fill` instead!
Know how border-image & border-radius don't play nice together?
(interactive https://codepen.io/thebabydino/pen/jxZyed)
#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!
clip-path: inset(0 round $r)
@codepen demo: https://codepen.io/thebabydino/pen/qBELJGY?editors=1100
(and yes, this is a tip I first shared on twitter over half a decade ago https://x.com/anatudor/status/1219916121341644807 )
