Is this possible with CSS 3

Question

I have two DIVs inside each other.

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

The outer div has a 20px padding. The inner div has a lot of content and scrolls. Is it possible to use the CSS3 gradient (alpha?) Function to make the top and bottom of the inner div disappear in the outer div when scrolling?

or do i need to use a transparent background image for this?

Answer 1

I do not think so. I thought you could do this with an insert-shadow, but I don't think this is the effect you need:

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 2

You can 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%
    );
}

, , , . http://gradients.glrzad.com/

, rgb() rgba() 1 ( ). 0.

!

Answer 3

, CSS3, , , : http://www.cssplay.co.uk/menu/fade_scroll PNG/GIF CSS, IE5.

Answer 4

div , .