"-carmen" wrote in message
I really like the way the site http://www.geeksaresexy.net/ uses diagonal lines with a gradient, which at around 600 pixels, blends very nicely into the background color.
I’ve been trying to create the same effect and am able to create the gradient as well as the diagonal lines, but I really don’t know how to blend it properly with the background color at about 600 pixels down. I’ve tried blur effects, with no luck.
You can see my attempt at http://gradientline.freehostia.com/testing.htm and if you scroll down to 600 pixels, you’ll note it’s not blended properly.
Would anyone be able to assist me to complete this effect.
Thank you
view source
<link rel="stylesheet"
href="
http://www.geeksaresexy.net/wp-content/themes/geek/style.css" type="text/css" media="screen" />
<!–[if IE 6]> <link rel="stylesheet" href="
http://www.geeksaresexy.net/wp-content/themes/geek/ie6.css" type="text/css" media="screen" /> <![endif]–> <!–[if IE 7]> <link rel="stylesheet" href="
http://www.geeksaresexy.net/wp-content/themes/geek/ie7.css" type="text/css" media="screen" /> <![endif]–>
follow link
opened in dreamweaver
..abox {
float: left;
margin: 0 0 0 70px;
display: inline;
width: 240px;
padding: 5px 0 0 55px;
font: bold 15px/22px "Trebuchet MS", helvetica, sans-serif; color: #2f2f2f;
background: url(images/geek_18.jpg) no-repeat left top;
white-space: nowrap;
overflow: hidden;
}
..bbox p { font-size: 11px; font-weight: normal; line-height: 1.2; } ..ab2 {
margin: 0 0 0 25px;
}
..abox li { line-height: 18px; list-style-image: none; list-style-position: inside;background: url(images/list.gif) no-repeat 0 2px; color: #ffffff; font-size: 12px; margin: 0 0 5px; padding: 0 0 0 20px; } * html .abox li {
list-style: disc outside;
padding: 0 0 0 16px;
}
..abox li.abf,
..abox li.abl {
list-style: none outside;
padding: 0;
}
..abox li a { color: #2f2f2f; font-size: 11px; font-family: "Trebuchet MS", helvetica, sans-serif; font-weight: normal; font-style: normal; font-variant: normal; }
object { text-align: center; margin: 0 20px 0 auto; }
..abox li a:hover { text-decoration: underline; }
..abox li.abf { font: 21px/22px arial, helvetica, sans-serif; float: left; margin-bottom: 10px; }
..abf { margin-bottom: 5px; }
..abf a { color: #b1161a; }
..apost ul { margin-bottom: 10px; margin-left: 15px; }
..apost ul li { margin-left: 15px; padding-left: 5px; }
..abox li.abl a { margin: 5px 0 0; background: url(images/geek_23.jpg) no-repeat left top; display: block; padding: 0 0 0 8px; height: 24px; color: #fff; font-size: 12px; font-family: arial, helvetica, sans-serif; font-weight: bold; font-style: normal; font-variant: normal; width: 120px; } ..abox li.abl a:hover {
color: #EEE;
}
..lead { clear: both; overflow: hidden; font-size: 12px; color: #fff; background-image: url(images/lead.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; height: 34px; width: 877px; margin: 0 auto; text-align: left; position: relative; left: 1px; }
#footer { clear: both; height: 80px; width: 875px; margin: 0 auto; overflow: hidden; color: #fff; background-image: url(images/lead2.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; position: relative; left: 0; } ..apost img { margin: 5px 15pxs 5px 3px 15px 5px 15pxs 5px 3px 5px 15pxs 5px 3px; }
..apost ol { margin-bottom: 10px; margin-left: 35px; padding-left: 0; } ..apost ol li { margin-left: 0; padding-left: 0; }