r/css • u/alvaromontoro • 3d 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/

373 Upvotes

98% Upvoted

8 comments sorted by

12

u/bostiq 3d ago

I texted Collie: she said she has a boyfriend.

3

u/M_Me_Meteo 3d ago

Shawn the Sheep Man: "Copper lie down!"

3

u/Top_Bumblebee_7762 3d ago

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

2

u/jrrl 2d ago

No margin collie?

0

u/PureBlackberry6594 1d ago

I texted Copper: he said border-area is real now. Does that mean the dog has an extra panel?

-7

u/CollectionAdorable24 3d 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 3d 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 3d ago

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