CODEWITHSUNDEEP
javascripthtmlcssborder
Freesnöw
Freesnöw

Reputation: 32153

Fading a border (css)

Here is a picture of what I am working with:

I need the borders below the vertical menu bar (on the left) to fade out (the one going up and the one going down). How would I make these two borders fade out? It seems kind of blocky now. I prefer not to use JavaScript but I will probably do what is necessary (I'm trying to make the site as light weight as possible).

EDIT

By fade, I do mean over space, not time.

Upvotes: 1

Views: 1006

Answers (5)

jrn.ak
jrn.ak

Reputation: 36619

CSS3 gradients to the rescue!

Live Demo

Note: Gradients are only set up for Firefox. I can't test Webkit, but it should be pretty much the same.

Upvotes: 0

digitalbath
digitalbath

Reputation: 7354

You could try the new CSS3 border-right-image attribute (http://www.css3.info/preview/border-image/) with a tall gradient PNG. However, this isn't going to be widely supported in most browsers. You're probably better off creating an image with the right gradient and setting it as the background-image on the .edge_bottom and .edge_top css classes (be sure to remove the existing border from those classes, too)

Upvotes: 2

Alp
Alp

Reputation: 29739

You can use two fade-out images as background-image

li.edge_top, li.edge_bottom {
  background-position: right;
  background-repeat: no-repeat;
}

li.edge_top {
  background-image: url:('fadeout_top.png');
}

li.edge_bottom {
  background-image: url:('fadeout_bottom.png');
}

Upvotes: 3

sathishn
sathishn

Reputation: 150

This will remove it, these pseudo elements are not supported in older browsers

ul.vertical_menu > li:first-child {
    border-right:none;
}
ul.vertical_menu > li:last-child {
    border-right:none;
}

http://jsfiddle.net/5Ceb5/

Upvotes: -1

dkamins
dkamins

Reputation: 21918

You can make a bunch of 1px tall blocks with successively lighter border-right colors.

(Assume you mean "fade" as in over space, not time)

Upvotes: 3

Related Questions