South Park in CSS3! Or, Interpreting cartman.css

Yes, someone did it; and Wagon Bertrand is his (somewhat awesome) name.

In nice, responsbile CSS3 too, with plenty of accomodations for both WebKit and Mozilla.

Here's what it looks like:

Absolutely perfect, as far as I can tell. Not as fancy as the real animation, maybe, which uses Maya and considerable processing power. But in this picture you can't tell. Plus the characters make faces on mouseover.

...

Okay, who could resist peeking inside a file named cartman.css? especially when the code is basically many, many declarations like this:

#cartmanPiedGauche {
	background-color:#0f0f0f;  margin: 0px;  padding: 0px;  height: 6px;  width: 124px;  position: absolute;  visibility: visible;  z-index: 2;  left: 35px;  bottom: 0px;
	-moz-border-top-left-radius: 84px 6px;  -moz-border-top-right-radius: 40px 6px;  -moz-border-bottom-right-radius: 0px 0px;  -moz-border-bottom-left-radius: 0px 0px;
	-webkit-border-top-left-radius: 84px 6px;  -webkit-top-right-radius: 40px 6px;  -webkit-bottom-right-radius: 0px 0px;  -webkit-bottom-left-radius: 0px 0px;
	border-top-left-radius: 84px 8px;  border-top-right-radius: 40px 8px;  border-bottom-right-radius: 0px 0px;  border-bottom-left-radius: 0px 0px;
	-moz-box-shadow: 0px 0px 1px  #0f0f0f;  -webkit-box-shadow: 0px 0px 1px #0f0f0f;  box-shadow: 0px 0px 1px #0f0f0f;
}

(To pre-empt non-French-speakers' searches: 'PiedGauche' means 'LeftFoot', says Wiktionary.)

More intriguingly, did you know that Cartman's legs angle outward at exactly 21 degrees?

#cartmanJambesA{
	background-color: #613816;  margin: 0px;  padding: 0px;  height: 44px;  width: 16px;  position: absolute;  visibility: visible;  z-index: 1;  left: 8px;  bottom: 1px;
	-moz-box-shadow: 0px 0px 1px  #0f0f0f;  -webkit-box-shadow: 0px 0px 1px #0f0f0f;  box-shadow: 0px 0px 1px #0f0f0f;
	-moz-transform: rotate(-21deg);  -webkit-transform: rotate(-21deg);  -o-transform:rotate(-21deg);  -ms-transform:rotate(-21deg);
}

For the bulge effect, I suppose. Note that the other characters' jambes do not angle outward at 21 degrees.

Head over to Wagon's interactive South Park graphic for full effect. Or check out his South Park spotlight page, on which he rightly declares his achievement a 'gros tour de force!'