#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

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!

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

Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...

Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR

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 )

Another super old @codepen demo I redid with modern #CSS is this yummy menu https://codepen.io/thebabydino/pen/AoxZQq

CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!

Here's a little thing I made on @codepen:

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

Uses clip-path, CSS grid, variables, halftone patterns https://mastodon.social/@anatudor/112401133442879091 and more!

Here's another little something from forever ago that I've recently updated on @codepen: a circular menu!

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

The code was really outdated, so I redid it to use CSS variables, trigonometry, grid, clip-path, SVG filters for the inner shadow & grain.

Hope you like it!

Ever want a pure CSS regular #polygon?

Back in 2016, I first wrote this #Sass #mixin to generate one. I've had others before, but this is the one I've kept updating it ever since and it's heavily commented.

You just need to pass it a number of vertices and an initial rotation.

@codepen demo: https://codepen.io/thebabydino/pen/mEgzxd

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.

As someone just hearted this again: a pure #CSS flexible multi-panel demo with continuous background I made some half a decade ago https://codepen.io/thebabydino/pen/BaaLZjq?editors=1100

Re https://x.com/meodai/status/1800098657020289330

If you ever want to create a regular/ star-shaped #polygon, I made a #Sass #mixin that generates them years ago
https://codepen.io/thebabydino/pen/PRMxwj/?editors=0100

A heavily commented & more modern version of the regular poly mixin https://codepen.io/thebabydino/pen/mEgzxd?editors=0100

Bonus: chubby stars mixin https://codepen.io/thebabydino/pen/KLyjBx

Example of a @codepen demo using such a regular polygon mixin to create three rolling hexagons: https://codepen.io/thebabydino/pen/LYzPeGX

#tinyCSStip

`filter: drop-shadow()` is great for non-rectangular shapes.

But there are a couple of frustrating issues:

`filter` is applied before `clip-path`
set `filter` on parent

blur inconsistent with that of box/ text shadow
set it to half the value

Resources:

https://codepen.io/thebabydino/pen/BRROzw
https://dbaron.org/log/20110225-blur-radius
https://codepen.io/thebabydino/pen/WNPwzGg