Is this possible with CSS 3

Question

I have two DIVs one inside another.

<div class="outside">
<div class="inside"></div>
</div>

The outside div has padding of 20px. The inside div has a lot of content and is scrollable. Is it possible to use CSS3's gradient(alpha?) feature to make the top and bottom of the inside div fade into the outside div when scrolling?

or do I have to use a transparent background image to achieve this?

Answer 1

You can surround inner div with other elements so that it renders proper gradients in proper directions.

Answer 2

I don't think so. I thought you might be able to do it with an inset box-shadow but I don't think it's the effect you're after:

body, .outside {
    background:#fff;
}
.inside {
    background:#ccf;
    box-shadow:0 -20px 20px 0px #fff inset; -moz-box-shadow:0 -20px 20px 0px #fff inset; -webkit-box-shadow:0 -20px 20px 0px #fff inset;
    height:100px;
    overflow:auto;
    width:200px;
}

Answer 3

You could try something like this

#outside {
    background-image: -webkit-gradient(
      linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
      to(rgba(255, 255, 255, 0))
    );

    background-image: -moz-linear-gradient(
      right center,
      rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
    );
}

You may have to use color stops if you need multiple gradients, and you can use this tool to do that. http://gradients.glrzad.com/

Once finished with your selection, copy the code and replace rgb() with rgba(), and add 1 more value (in this case the opacity). Use 0 for fully transparent.

Good luck!

Answer 4

Another answer, not using CSS3 but I'm sure this is the effect you're looking for: http://www.cssplay.co.uk/menu/fade_scroll Uses PNGs/GIFs instead of the new CSS properties but it works in browsers back to IE5.