If you’re a web developer like me, you’ve made plenty of sites where the design includes a large gradient for the background coloring. Up until now the only way to do was to either, have a huge image that was the width of the site and would take forever to load or to use a however tall and 5px wide image file that you repeat on the x axis. Not that big of a deal, but stuff like the image file no loading or loading slowly can ruin the look of a site. Which is way I think that CSS3 gradients are going to be something that people will use on close to every site they build.
Here’s the great thing about it, you can just add a gradient to the background of any element on your site without having to worry about image sizes. The code for gradients it this:
1 2 3 4 5 | /* For Firefox */ -moz-linear-gradient(start point, start color, end color); /* For Safari and Chrome */ -webkit-gradient(type, start point, end point, from(start color), to(end color)); |
I was messing around with gradients and I wanted to add one to the background of the body of a test page I was build. So I put:
1 2 3 4 5 | body { height:100%; background:-moz-linear-gradient(top, #666, #CCC); background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#ccc)); } |
You’d think this would add a gradient to the body background and you could move on to the next thing. I was surprised to find that it did this:
The gradient is only the size of the content! Add more content and it stretches out. This isn’t something that I can see being useful for a website and, amazingly, I couldn’t find anything on the web about people using CSS3 gradients for the body background. Every example I found just showed little squares of blue to red gradients. I messed around for a while and finally had an idea. What if I applied the background to the html tag? Here’s what you get:
Now the gradient stretches to the height of the whole page. Now, if you’re going to do this, you have to add a couple of things on to the end of your CSS3 mark up:
1 2 3 4 5 | body { height:100%; background:-moz-linear-gradient(top, #666, #CCC) no-repeat #ccc; background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#ccc)) no-repeat #ccc; } |
If you don’t add the no-repeat, the gradient will repeat on long pages and if you don’t set the background color, I set it to the bottom color on the gradient, the background color will be white on long pages after the gradient ends.
As usual, this won’t work in any version Internet Explorer that’s out right now and it doesn’t seem to be working in the IE9 preview, so if you’re going to use this, you’ll still have to do it the old way if you want IE users to have the same experience on your website. But that won’t be that big of a deal, if like me, you usually have seperate CSS stylesheets for IE7 and IE8.
thats really cool bro
Thank you I was having a hard time wondering why it looks weird on body tag for a while.
Finally! Thank you, I have been searching for ages trying to find a solution for that.
Well done!
Is there a way to control how much the gradient fades by?
Thank you for the information provided. I’m going to try these ideas.
GUY U ROCK that was fantastic it works well in firefox 3.6, opera 11+, chrome, safari and even our dear old internet explorer 8 using the filter syntax