CSS tricks: underline with alpha-gradient on both ends - css

Question

I need to underline my elements (menu items) with a line which has an gradient on BOTH ends.
It can't simply be a graphic (even stretched one), since the width of elements may vary significantly.
The desired effect:
What I did, was to create a line, 1000px wide, with gradient on both ends, then append following HTML <div><div class="right"> </div></div> to every element to be underlined.
The CSS is following
#navmenu li div
{
height: 1px;
background-image: url('images/1000glight.png');
background-repeat: no-repeat;
}
#navmenu li div.right
{
width:35px;
float: right;
background-position: -965px 0;
background-image: url('images/1000glight.png');
background-color: #212121;
}
This however is not truly alpha. I need to specify the background color of "right-side" div in order to "cover" the image (1000px line) which is below.
Any ideas how could I improve it, keeping pure CSS?

Answer 1

Using an approach similar to this, with the gradient being the background image of a wrapping div with padding-bottom to show only the lower part of the background:
<div class="wrap">
<div class="content">Some Text!</div>
</div>
And CSS:
.wrap {
float: left;
padding-bottom: 5px;
/* IE10 */
background-image: -ms-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Opera */
background-image: -o-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0.25, #000), color-stop(0.75, #000), color-stop(1, #fff));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
}
.content {
background-color: #fff;
}
Works, but does omit IE<10; which might be do-able with some kind of filter, but that'll take more reading before I can post such.
JS Fiddle demo of current implementation.
Unfortunately the DX.transform option doesn't appear able to allow for multiple stops that the above uses, reference: Simulating color stops in gradients for IE
So, perhaps you'd have to use a background-image fallback for IE<10, which is far less than ideal.

Answer 2

Use the border-image gradient CSS3.
div {
width:200px;
border-style:solid;
border-width:15px;
text-align: center;
-webkit-border-image:
-webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}
Demo here.
This will only work with Webkit browsers (Chrome, Safari etc). There should be some vendor specific equivalents.

Answer 3

You can use an empty div with a CSS3 Gradient... check out the presets here: http://www.colorzilla.com/gradient-editor/ - of course you'll have to change the orientation of the gradient. I use this a lot for similar issues. It's a great alternative to images.