PDA

View Full Version : horizontal rule



Angyl
08-13-2005, 11:10 PM
There isn't a way to have a horizontal rule fade out on each end using css or a java script instead of having to create an image - is there?

mattster
08-19-2005, 11:42 AM
There is no way that i know of and the only way i think you can have fading is by using the IE filters (which means that of course it will only work with IE).

Here is a solution and it is by no means eligant but it seems to work:


<html>
<head>
<style type="text/css">
<!--
div.wrapper {
width:100%;
background-color:#cccccc;
}

div.lhr {
float: left;
margin-right:0px;
width: 50%;
height:1px;
font-size:0px;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1,StartColorStr='#FFFFFF',EndColorStr='#CCCCCC');
}
div.rhr {
margin-left:0px;
width: 100%;
height:1px;
font-size:0px;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1,StartColorStr='#CCCCCC',EndColorStr='#FFFFFF');
}
-->
</style>
</head>

<body>

<div class="wrapper">
<div class="lhr"></div>
<div class="rhr"></div>
</div>

</body>
</html>

spyder
08-19-2005, 06:11 PM
if you have a solid background, you might be able to define the the color as a gradient through css

http://www.mermeliz.com/html/gradient.htm

mattster
08-22-2005, 04:58 PM
Hmm, If you read what i wrote that is what i suggested!