CODEWITHSUNDEEP
htmlcssstylesheet
Taho
Taho

Reputation: 833

Is this possible with CSS 3

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?

Upvotes: 3

Views: 172

Answers (4)

tagawa
tagawa

Reputation: 4621

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.

Upvotes: 1

Marko
Marko

Reputation: 72230

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!

Upvotes: 1

tagawa
tagawa

Reputation: 4621

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;
}

Upvotes: 1

Tomasz Kowalczyk
Tomasz Kowalczyk

Reputation: 10467

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

Upvotes: 0

Related Questions