Someone told me you can't apply different backgrounds to the content/padding/border/margin areas of a box, and I was like... I think you... can actually.
(e.g. multiple backgrounds with different background-clip values)
I ended up making this weird box model machine thingy. https://codepen.io/chriscoyier/pen/gONzpYb
@chriscoyier I don't really understand the css here. Would love to see a blog post going a little more in depth.
Aug 23, 2024, 3:57 PM@polotek @chriscoyier - `background-clip` defines which box boundary (border, padding or content) a background *image* is painted within; it doesn't affect background *colors*.
- `background-image` is used to paint solid colors using linear gradients, which are technically background images.
- each one has three comma-separated values, which can be interpreted as 3 separate paint instructions, each with its own `background-image` and `background-clip` value.
Aug 23, 2024, 4:06 PM@polotek @chriscoyier So it works as 3 instructions:
1. Paint a blue-to-blue gradient image, and clip it at the box's content boundary.
2. Paint a green-to-green gradient image, and clip it at the box's padding boundary.
3. Paint a yellow-to-yellow gradient image, and clip it at the box's border boundary.
Note that each layer is painted *behind* the previous layer. The spec has a fairly readable section on layering multiple background images:
https://drafts.csswg.org/css-backgrounds/#layering
Aug 23, 2024, 4:07 PM@polotek @chriscoyier (I’ve also used some made up vocabulary that doesn't match the vocabulary used in the spec, so don't quote me verbatim ^^)
@chriscoyier My students will just be happy to have an interactive box model to understand what padding, border, and margin are in a delightfully visual way 💖
@chriscoyier This is really great, those `background-clip` values are very underrated.
You could also fake a color on the margin area with outline also, though border-radius muddies it up a little:
`outline: var(--margin) solid lightsalmon;`
@walpolea ooo yeah that outline idea is cleaner than the weird grid thing I did
@chriscoyier I've already added this to my Astro starter:
Aug 23, 2024, 7:01 PMYou can simplify the gradients by defining the color only once `linear-gradient(oklch(83% 23% 116deg) 0 0)`
And in the future we will have a new background-clip (border-area)