How to create an opacity gradient without colors on a div borders?

Question

I have a slight issue which I'm not sure has a solution.

Basically I want to create an opacity gradient on a div borders non dependant on a color.

Let me explain.

I have an "overflow:hidden" div (which we'll call MainDiv) that contain another big div (which will call SlideDiv) that I slide across the viewport using jquery. The main div has a "full viewport" background complex image that moves as well. The all thing create a really nice parallax effect.

As expected the "SlideDiv" content disappears beyond the viewport border. Now here is the trick. I'd like the content to not just disappear but to fade away :)

For this to work, I need to engineer an opacity gradient on the viewport borders. And as there is a complex image on the background that must be visible at all time, this gradient cannot be color related. In other terms, I'd like a "opacity:1 (we see the content) to opacity:0 (we don't see the content)" gradient and not a "opacity:0 (we see the content) to White/Black/Green/AnyColor opacity:1 (the content is behind a opaque color)" gradient.

That means that I can't use -webkit-gradient or -moz-linear-gradient. Or can I ?

I'm afraid I can't show you any thing for business related reasons.

Questions are : - Is it possible using CSS2 or 3, jQuery or a plugin or any other technology (excluding flash) ? - And if so, how ? :)

I hope I'm clear, but I'm not so sure so sorry guys ;)

Regards, Jibou

Answer 1

Take a look at this. You can choose the gradient you like and from it you can save the CSS for any browser that support gradients

Answer 2

Cool.. What I am getting from whole your query is i.) you want to apply a gradient to the border ii.) Also you want fade-in and fade-away effect to border.

if I got it correctly or very much near by it, you can use the following tricks. i.) Visit this link to get the gradient on the border with css. ii.) This may be tricky : You can create an svg shape for with gradients and place it with absolute positioning in to your main div with full width and height(there are a lot of other ways you can manage height and width of an element.). Since it will be an SVG image or script you don't need to worry about resultion.

if I am not reaching to the solution of your problem. let me know I will try again.