Treehouse: Grow your CSS skills. Land your dream job.

Is this gradient thing possible?? Please help

  • # April 10, 2012 at 1:55 pm

    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

    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


    # April 10, 2012 at 4:28 pm

    @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.

    Hope this helps!

    # April 10, 2012 at 4:37 pm

    @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?

    # April 11, 2012 at 1:27 pm

    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.

    # April 12, 2012 at 7:10 am

    @Blackhawkso@jstam‘s method will work just fine on various screen sizes and would not hinder the functionality of the document at all…

    as would be the case if you used a div overlay with a background-image for instance…but since that is not the case, you are golden…he pretty much coded the whole thing for ya.

    # April 12, 2012 at 10:36 am

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.