When ThinkGeek launched their new site design last year, one of the hilights was the background image that switches from robots to zombies when you scroll down to the bottom of the page. It was one of those things that made me, as a web designer, need to know how they did it. How they did it was using a few images and some wrapper divs. It’s not complicated once you figure it out and I think the few extra divs is worth it for the effect. If you want to see how ThinkGeek does it, check out this screencast by Chris Coyier over at CSS-Tricks.
I knew it could be done with CSS3 but was it worth it? The other day I began wondering if you could do it with less HTML and CSS, if you used things like CSS gradients and multiple backgrounds. After some trial and error, I figured out you could do it with a couple of lines of CSS and no extra HTML. Of course, the problem is, it won’t work in any version of IE.
For the CSS, we just need to apply multiple background images to the body tag and this works because CSS3 gradients are technically a background image.
background:url(images/robots2.png) fixed repeat-x -275px bottom, -moz-linear-gradient(#000, #404143 180px, #404143 70%, #000 80%) no-repeat #404143;
background:url(images/robots2.png) fixed repeat-x -275px bottom, -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(0.1, #404143), color-stop(0.7, #404143), color-stop(0.8, #000)) no-repeat #404143;
Check out the demo here.
That’s all the CSS I used to get the same effect. there’s two background properties because there has to be one for Firefox and one for the Webkit browsers, Safari and Chrome. Robots2 is just a image I made that’s the same colors as the ThinkGeek image. Putting it first sets it on top of the gradient background, For the gradients, of course Firefox and Webkit have different syntax but the set up for this is pretty much the same. Black for 180 pixels in Firefox or 10% in Webkit. Then it changes to the gray and stays gray until 70% of the page height and it turns black again at the 80% mark. #content is just a div I put in there because for the effect to work right the page needs to be around 2000 pixels in height, which isn’t that big of a deal.
I think this is great example of what CSS3 is going to let people do. It wasn’t a ton of CSS and HTML to do it with images, but this will load faster because it’s only one image and less code. One thing I noticed while doing this is Chrome doesn’t seem to create gradients as nicely as Safari or Firefox, hopefully Google is working on this because as CSS3 becomes more wide spread, it might make some designs look pretty bad. Another I’ve noticed, if you put a gradient first then multiple backgrounds won’t work. I was fooling around trying to have two gradients and nothing would display at all.