in css by fyd on 02 Apr 2008
A quick and simple way to use a gradient background for you web site. Make the gradient look like it is fading out with no weird lines - just smoothness. It's really quite easy to do using CSS to edit the body property of the HTML document.
We will start off with the HTML. So, open a new document - I'll be saving mine as fade.html. Get the basic HTML shell written out and go ahead and add a link to a stylesheet - style.css. Now here is how we will layout the page for presentation purposes.
<html> <head> <title>Gradient Background Fade</title> link to stylesheet <link href="style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="main"> main container <p>Place holder text</p> <div id="leftSide">left demonstration </div> <div id="rightSide"> right demonstration <h1>Right Section</h1> </div> </div> </body> </html>
Note: if you copy and paste this you need to take out the 'main container', 'left demonstration', 'right demonstration' text - they are not to be in the code they are just comments I made.
Just a quick layout to show a couple uses of the gradient fade. Before we get to the CSS we need to make(or get) an image for the background. You can use Photoshop to create a simple gradient
In Photoshop create a new file - I'll make mine 10px wide by 400px high.
Pick the colors you want to use for your gradient - Take note of whatever the bottom color of the gradient is - we will need it later. If you double click on the color in the Tools pallet you can copy the hexadecimal number (# followed by six digits). Fill your file with the gradient and save it. Or right-click and save the images I used.
Now to the CSS
body
{
/*the color here #2c2721 was the bottom color
of my gradient image - a seamless fade*/
background: #2c2721 url(img/bg3.gif) repeat-x;
}
/*just a container to hold things*/
#main
{
margin: auto;
width: 700px;
height: 600px;
background: #ffffff;
}
#main p
{
padding: 10px;
}
/*the area to the right with a gradient fade*/
#rightSide
{
float: right;
margin-right: 10px;
height: 500px;
width: 200px;
/*#ffffff is the bottom color in gradient*/
background: #ffffff url(img/rightbg.gif) repeat-x;
}
#rightSide h1
{
color: #fff;
margin-left: 5px;
}
/*left area with fade example*/
#leftSide
{
float: left;
height: 500px;
width: 200px;
/*#ffffff is bottom color in gradient*/
background: #ffffff url(img/bg.gif) repeat-x;
margin-left: 10px;
}
All the extra CSS is just formatting to show the examples. The background: is the property we need to worry about to make the gradient fade work. Use repeat-x to make it show up all the way across the page, but not repeat down the page.
Download HTML, CSS, and Images
Not the prettiest example, but you get the idea - pick the colors you want and make it look good.
Popularity: 60% [?]
