Is this gradient thing possible?? Please help

[Blackhawkso]

Hey everyone

I have an idea that i want to do but i’m not sure how to implement it please help if you can.

On the site i have split it into 3 section’s

header (Which is sticking to the top)
content (Which has scroll on y axis)
footer (Which is sticky to the bottom)

here is a fiddle http://jsfiddle.net/yqHxS/

now on the site i am using a gradient as a background from a lightish red to a dark red top to bottom. The thing is that i would like the content when it scrolls up or down to fade as if it’s going behind either the header or the footer. Now i realize i should use a form of gradient that is a color to transparent to get this effect but the issue is getting the color in the transparent to color gradient to match the color of the background at that point of the page. Does anyone know of an easyish way around this, or is there some way that i could get the alpha transparency of the content to gradually go from 100% to 0% when it gets to the top or bottom of the div?

If what i am saying is making no sense take a look at this image of the mobile version of the site and you will see what i would like the content to do.

I hope someone will have an answer to this thanks guys

Phil

[jstam]

@Blackhawkso I’d probably go for something a little simpler. You could position the header and footer while using a CSS3 box-shadow to give your text fading effect.

http://jsfiddle.net/jstam/Rejd8/

Hope this helps!

[Blackhawkso]

@jstam How would this solution cope with the background gradient changing due to different screen sizes? or am i reading the code wrong and the color of the box-shadow will adjust/keep inline with the background gradient?

[scheme]

It wouldn’t, but I doubt that anyone would notice it. Placing elements on top of the text has disadvantages, btw. It would make text selection harder and links would be impossible to click on.

Edit: It would be possible with absolute or fixed positioned pseudo elements with percentage heights, I think.

[Author]

Posts