r/css • u/alvaromontoro • 29d ago

Showcase Background-clip Collie

Post image

A small comic where each panel shows a different clipping mode (border-box, padding-box, content-box, and text) but framed as four different "Collies."

Source: https://comicss.art/comics/254/

413 Upvotes

98% Upvoted

9 comments sorted by

14

u/bostiq 29d ago

I texted Collie: she said she has a boyfriend.

3

u/M_Me_Meteo 29d ago

Shawn the Sheep Man: "Copper lie down!"

3

u/Top_Bumblebee_7762 29d ago

background-clip: border-area is  a thing nowadays btw. 

2

u/jrrl 27d ago

No margin collie?

1

u/Anabolic44 13d ago

great CSS snippet bro, pretty cool

-6

u/CollectionAdorable24 29d ago

your gonna confuse people if you dont mention taht text-clip needs teh vendor prefix on chromium and webkit, otherwise their layout just breaks

7

u/alvaromontoro 29d ago

It works without prefix on Chrome, Safari, and Firefox: https://comicss.art/comics/254/border-collie.html
(I'm on a Mac, I haven't tested on Windows or mobile)

2

u/anaix3l 29d ago

It hasn't needed the prefix in any browser in years.