Pure #CSS #3D chamfering sequence on @codepen: tetrahedron → chamfered tetrahedron → cube and back https://codepen.io/thebabydino/pen/MWVJVKE

#geometry #maths #css3D #CSSclipPath #cssTransform #cssTransforms #coding #web #dev #webDev #webDevelopment

A little thing I made on @codepen.io: breathing with `shape()`
https://codepen.io/thebabydino/pen/vEEqMWo

`shape()` is supported in Chrome 135+ and Safari 18.4+.

Firefox 126+ supports it for simple shapes (but not for this demo) when setting thelayout.css.basic-shape-shape.enabled to true in about:config.

#CSS #clipPath #cssClipPath #animation #cssShapes #code #coding #clipping #web #dev #webDevelopment #webDev #frontend

Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it https://www.reddit.com/r/css/comments/1kcmabf/comment/mq5ck6m/

Live on @codepen https://codepen.io/thebabydino/pen/PwwQxdb?editors=0100

`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.

#CSS #clipPath #cssClipPath #Sass #maths #cssMaths #code #coding #web #dev #webDevelopment #webDev #frontend

#tinyCSStip `clip-path` or `mask` are applied after `filter`.

This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.

We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.

https://codepen.io/thebabydino/pen/BRROzw

#CSS #filter #cssFilter #clipPath #clipping #cssClipPath #cssMask #coding #frontend #web #dev #webDev #webDevelopment #code

Here's a quick breathing box demo with `clip-path: shape()` on @codepen.io: https://codepen.io/thebabydino/pen/ZYENVOQ

Working in Chrome 135 and Safari 18.4! 🥳🎉

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend

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

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

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 )

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius

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.

#CSS #clip #clipPath #clipping #cssClipPath #zoom #zoomEffect #code #coding #frontend #web #webDev #dev #webDevelopment

⭕️ CSS Clothoid Corners
by Takehiko Ono @onopko
Generate clothoid rounded corners by CSS clip-path.
#webapp #webtools #ClothoidCorners #CSSclipPath

https://onotakehiko.dev/clothoid/