shane glass

I tinkered around with my site some tonight, and ditched the 2010 web trend of simple Photoshop noise in the background with something a little more complex using the beauty of CSS3. It will probably look best with a Webkit browser as I haven’t finished Mozilla/Opera browser properties yet.

I thought I’d give you a short tutorial. I went into this pretty much blind with only some sample code from Webkit.org’s website.

I decided to tilt the gradient, which (linear, 0 0, 100% 100% achieves. You can play with those numbers to tilt as you please.

The trickiest part was figuring out the correct placement of the color-stop property. I first had just six stripes, but decided 10 would be better. All you have to do is divide 100 (for 100% width of the page) by the number of stripes you want, and place the color-stop at the appropriate spot.

In my case, I placed a color-stop of white at 2% opacity as every other stripe, then left background-color:#ddd8d1 alone for the next stripe.

For Webkit browsers:

body {
	background-color:#ddd8d1;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,
   	color-stop(.10,rgba(255,255,255,.2)),
   	color-stop(.10,transparent),
   	color-stop(.20,transparent),
	color-stop(.20,rgba(255,255,255,.2)),
	color-stop(.30,rgba(255,255,255,.2)),
	color-stop(.30,transparent),
	color-stop(.40,transparent),
   	color-stop(.40,rgba(255,255,255,.2)),
   	color-stop(.50,rgba(255,255,255,.2)),
   	color-stop(.50,transparent),
   	color-stop(.60,transparent),
   	color-stop(.60,rgba(255,255,255,.2)),
   	color-stop(.70,rgba(255,255,255,.2)),
   	color-stop(.70,transparent),
   	color-stop(.80,transparent),
   	color-stop(.80,rgba(255,255,255,.2)),
   	color-stop(.90,rgba(255,255,255,.2)),
   	color-stop(.90,transparent),
   	color-stop(1.0,transparent),
	color-stop(1.0,rgba(255,255,255,.2)),
	color-stop(1.0,transparent),to(transparent))}

The pattern of opaque and transparent stripes should be self-explanitory. The trickiest part was the last stripe, and getting the last transparent stripe to appear. Before I figured it out, the last stripe wasn’t rendered right.

The main issue (if you call it one) is that the width of the stripes is highly variable, as they depend on the height of your page. The longer the page, the wider the stripes. I don’t mind it, as it gives each page a little personality.