Linear border gradient in css3? from white to black

HTML & CSS
1

I’ve currently go a 1px solid white left border on my nav menu. I’d like to make the border color go from white at the bottom to black at the top.

Is this possible with css3?

2

Hi,

I haven’t really played around much with gradients but I think something like this could be made to work.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p.test{position:relative;padding:10px;margin:0 0 1em}
.test:before {
    background:-moz-linear-gradient(43% 100% 90deg,#FFFFFF, #000000);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF));
    content:" ";
    display:block;
    position:absolute;
    left:0;
    width:1px;
    height:100%;
}
</style>
</head>
<body>
<p class="test">Gradient border effect.</p>
</body>
</html>

You can generate the code for the gradients from here and remember to add the w3c version as the last option.

3

Hi Paul, thanks for the suggestion. From your answer I take it that there is no specific css property for border gradients, right?

Ideally I was hoping for something along the lines of…

border-color:gradient(start=#fff, end=#000, midpoint=50%);

I’m going to try border-image (specifically, border-image-left) with a semi-transparent png. I suppose if the background of my element is black and my png fades from white to transparent, that should effectively give me a border that fades from black to white. Well see.

4

[QUOTE=Scott Blanchard;4931969]Hi Paul, thanks for the suggestion. From your answer I take it that there is no specific css property for border gradients, right?

Ideally I was hoping for something along the lines of…

border-color:gradient(start=#fff, end=#000, midpoint=50%);

I haven’t seen anything like that but sometimes its hard to keep track of all the new additions/changes in CSS3 so I may have missed it but a search has not revealed anything yet.

[quote]
I’m going to try border-image (specifically, border-image-left) with a semi-transparent png. I suppose if the background of my element is black and my png fades from white to transparent, that should effectively give me a border that fades from black to white. Well see.

You should be able to do it with border-image and use the stretch value to stretch the border to fit. (My example above though will stretch to fit also and automatically keep track with the content without using images.)

5

Yep, but I’m finding it real stubborn. Here’s my code trying border-image, but so far, no good.


.menu.nav {position:absolute; /*top:122px;*/ bottom:0; white-space:nowrap;height:20px;width:977px;text-align:center;margin:0 auto;x-index:9999; background:url(header.gif)}

.menu.nav ul {display:inline-block;text-align:left;overflow:visible; position: relative; list-style: none; z-index:9999; padding:0;margin:0;}

.menu.nav a {/*border-left:1px solid #fff;*/border-left:1px solid transparent; -webkit-border-image:url("menu-border.png") 1 1 round; text-transform:uppercase;letter-spacing:.1em;font-size:.8em; color:#fff; background:url(spot2.gif); display:inline-block; padding:10px 10px 5px 10px !important;}
6

Another option might be to remove the current border on the nav, place a left and right margin on it of 1px, and wrap it in a div that has a gradient background on it. Just a thought, anyhow.

7

This works for me:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{background:#ccc;}
.menu.nav {
    position:absolute; /*top:122px;*/
    white-space:nowrap;
    height:20px;
    width:977px;
    text-align:center;
    margin:0 auto;
    z-index:9999;
    background:url(header.gif)
}
.menu.nav ul {
    display:inline-block;
    text-align:left;
    overflow:visible;
    position: relative;
    list-style: none;
    z-index:9999;
    padding:0;
    margin:0;
}
.menu.nav a {
    border-width:0;
    border-left-width:1px;
    -webkit-border-image:url("images/temp.gif") 1 1 stretch;
  -moz-border-image:url("images/temp.gif") 1 1 stretch;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:.8em;
    color:#fff;
    background:url(spot2.gif);
    display:inline-block;
    padding:10px 10px 5px 10px !important;
}
</style>
</head>
<body>
<div class="menu nav">
    <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
    </ul>
</div>
</body>
</html>

The temp gif I used was just a 1p x 30px gif with white to black gradient. It should work the same for a png. I stretched the image to fit so that t doesn’t repeat.

However my original answer still seems easier and does the same job without images ;).

8

Thanks all for the suggestions and help!