#CSS trick not enough folks know about: painting into the sub boxes of an element - border - padding - content you can paint into one, or all of them differently! here's a gradient border, a solid padding fill, and a gradient content (inner) box see fur yerself codepen.io/argyleink/pe... - ThreadSky

nerdy.dev • 196 days ago

#CSS trick not enough folks know about:

painting into the sub boxes of an element
- border
- padding
- content

you can paint into one, or all of them differently!

here's a gradient border, a solid padding fill, and a gradient content (inner) box

see fur yerself
https://codepen.io/argyleink/pen/NWQmxRj

1 / 2

Comments

jasonbradberry.bsky.social•196 days ago

👀

maikelkrause.bsky.social•196 days ago

Not to mention that you can even paint _outside_ the box with border-image. Which is great in combination with overflow: hidden/scroll/auto if you want to draw something but not have it clipped.

(Incidentally, saw this used in your latest YouTube video for some view transition tricky, @nerdy.dev.)

nerdy.dev•196 days ago

I use that trick alllll the time

Box shadow can also paint forever outside an element, so cool

maikelkrause.bsky.social•196 days ago

I swear, the ordering of multiple backgrounds always trips me up. The paint order is reversed from the specified order.

nerdy.dev•196 days ago

Agree, it messed me up here at first

logno.dev•196 days ago

I swear I googled a gradient border a few months ago and the best answer was a nested div. Where was this solution? Why didn't Google give it to me? I'd like to file a complaint

mrdisagree.bsky.social•196 days ago

TIL! what’s browser support like? is this a relatively new feature or been around a while?

kld.dev•196 days ago

Widely available:
https://caniuse.com/?search=background-clip
https://caniuse.com/?search=background-origin

mark.ie•196 days ago

Pity it doesn't work in ie11, my favourite browser 😂

anatudor.bsky.social•193 days ago

background-clip: *-box certainly works in IE11. And older. First used this stuff in order to create 3D-looking slider thumbs/ tracks with input[type=range] some 10 years ago https://css-tricks.com/the-backgound-clip-property-and-use-cases/ as thumb/ track pseudos themselves cannot have pseudos/ children. And it certainly worked then.

mrdisagree.bsky.social•196 days ago

Comments

Posting Rules

Reply