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
@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?
You could set the article height to 100% and overflow to scroll. Then place all article content inside a div. This would make the gradient always go from header to footer no matter how the screen size is. Would also be responsive.
Note: the scroll bars will fade behind the header/footer also. Could make for a cool effect.