Pure #CSS #3D chamfering sequence on @codepen: tetrahedron → chamfered tetrahedron → cube and back https://codepen.io/thebabydino/pen/MWVJVKE
Pure #CSS #3D chamfering sequence on @codepen: tetrahedron → chamfered tetrahedron → cube and back https://codepen.io/thebabydino/pen/MWVJVKE
I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:
From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.
See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz
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 )
How do you get a zoom effect on an `img`? So that you still have the right click `img` menu and also don't need any extra element?
Here's how on @codepen: https://codepen.io/thebabydino/pen/BaGYPPV
Prompted by coming across a demo that gets the effect with a `div` wrapped in an `overflow: hidden` parent.