CODEWITHSUNDEEP
css
Ciel
Ciel

Reputation: 4440

CSS - Vertical Border with Horizontal Gradients

I have a nifty vertical divider that has a horizontal gradient for certain parts of my page, and it works splendidly. This is just an image file that I apply as a centered background to a layer and float it there to get the effect I want.

Image Example Here

This works great, but I was wanting to try and do this to a table cell border, so that it cut down that side and gave the slight gradient effect all the way down. Is this possible with CSS3?

I have explored This post a bit, and it does seem like this technique is feasible, but attempting to just add these gradients to the border property keeps coming up with failures.

Is there a specific technique involved in such an effect?

Update

Small jsFiddle to demonstrate how the current divider works, and where I am trying to apply it in a normal table and what keeps happening when I try.

jsFiddle

Upvotes: 2

Views: 3264

Answers (1)

Dalex
Dalex

Reputation: 3061

Extending from the comments above... This effect can be mimicked by using pseudo-elements on a container div. I think in your case, it may be better than trying to implement on a table border. For example, a wrapper div called 'box' or whatever class name you prefer...

.box:before,
.box:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  width: 1px;
  height: 50%;
}

.box:before {
  top: 0;
  background: linear-gradient(to top, #333 0%, transparent 100%);
}

.box:after {
  bottom: 0;
  background: linear-gradient(to bottom, #333 0%, transparent 100%);
}

Check this DEMO. Also don't forget to add your vendor prefixes on background: linear-gradient in order to make it cross-browser.

Upvotes: 4

Related Questions