Cosby: background image generator

You want crazy backgrounds! You need crazy backgrounds!

Cosby is the code to use for generating striped backgrounds (or gradient edges) in *all* your applications.

It's named after Bill Cosby, whose colorful sweaters were bold and memorable, but is in no way affiliated with or endorsed by the great man himself. Just so we're clear.

Use a Cosby image in your stylesheet just like you would any other image. But the url is a little code that describes the stripes you want to see. Follow the examples below and you'll understand.

Or just stop reading this boring description and head straight to the playground.


Pin stripes

A thick line then a thin line. (20 pixels of almost black, then 1 pixel of dark gray)



Look at that url...


First we say "Image/" then "Stripes/" -- so far, easy peasy.

Then comes the special Cosby Code. We say "V" or "H" for vertical or horizontal.

And after that there are pairs of numbers--couplets, tuples-- that describe each stripe in our pattern:
    20/222 means 20 pixels wide, color 222
    1/666 means 1 pixel wide, color 666.

Put it all together and you have a full url to a very specific pattern of stripes.

Even stripes

Red and white, 50 pixels each.



Rainbow stripes

My daughter insisted I include this one. All your pony sites need this.

Red, orange, yellow, green, blue, purple, each 20 pixels wide.



Designer pink and black stripes



Horizontal stripes

If you can't afford Hanselman's Cosby Sweater (as seen at right), you can just recreate it using some MVC magic.



Gradients? Ultra-Gradients!

And it's not just stripes. Cosby does gradients too. Admiteddly there's less call for gradients in this html5-smitten world. But Cosby delivers anyhow.





Why? You're asking Why!

I was messing with MVC and I wanted to try something different with the 'FileResult' of an action. It's swell.

In 2005 (SIX Years ago) I wrote a Gradient Maker using 1.0. So I resurrected that idea for Cosby. Also I liked the idea of caching the images on disk. It means that if the code stops working, the images are still there and can be used directly.