css - Is it possible to graduate the opacity of an HTML element?

Question

I want a <div> element (the whole element, contents and everything) to fade out towards the bottom. It's to truncate a news post that has to fit into a very restrictive space (and can contain unpredictably sized elements).

Everything I've been able to find is for using a transparency gradient on a background color. Which would be fine except behind the news post is a background image, so I can't just put a color gradient over top of the bottom of the content.

I'd put an image gradient over top of the content but the background moves behind the content as the user scrolls.

So imagine this existed:

opacity: -webkit-linear-gradient( ... );

graduating the actual opacity of the element is the only thing that will work. Is it possible?

Answer 1

2015 Update

There have been improvements in the browser world towards this ability using masks, however, as far as I can see none of it is completely standardised across browsers (in a nice way) yet. So whatever you implement it gets messy. For further information on recent enhancements, the following is a good post:

https://css-tricks.com/clipping-masking-css/

Chrome seems to win out in terms of support and speed, with Safari not far behind. Sadly Firefox does not support much of the linked to page, save for anything that relies on SVG. Luckily it is the SVG examples that show fading and seem to work across Chrome, Safari and Firefox (at least the latest versions of).

So perhaps the best route for now is to implement an SVG mask — based on a rectangle with a gradient applied — and assign it using mask: url(#maskid);. However, I tend to find these solutions get confused by SVG viewBox and dimensional sizing issues — and can go very odd when not applied to "media" elements — so will hold off on giving a water tight example for now.

Basic principal

The only way to currently achieve this is to layer a gradient fading to the background colour "on top" of the element you want to fade using position absolute. So using the gradients from the other answers above, but apply this to a floating element on top of the text.

This gets the best effect when you have a solid background colour, but it is doable with background images as well, as long as the background is fixed in position.

css

.container {
  position: relative;
  overflow: hidden;
  height: 50px; /* some fixed height that you need you content to fix to */
}

.fadeout {
  position: absolute;
  width: 100%;
  height: 1em;
  /* you can use a premade png fade out or a dynamic gradient here*/
  background: ...;
}

markup

<div class="container">
  <p>
    This is my long text that goes on for paragraphs and paragraphs, 
    far longer than the container....
  </p>
  <div class="fadeout"></div>
</div>

Update

After spotting Carson Myers further comments around this question I'm making a guess that the following could work. When I stated above that the background has to be fixed - I mean that it had to be fixed in terms of background-attachment. So if the background has been implemented in this way you can use the following 'hack' to get things to work. Bear in mind that floating absolute layers on top of content can cause usability problems.. and having many transparent layers can slow older browsers down:

jsfiddle

http://jsfiddle.net/kthPT/30

The code below is an example with an outer layer set to scroll it's content (to represent the outer page or body), and with inner "news" areas that have a limited height and fade out the rest of their content. Both uses of background: url('...') need to filled out with the same background image path. Because the background image is 'fixed' in both locations in all the modern browsers I've tested it calculates the background to the same position. So the floating layers on top have the same graphics as the layer below.

The resulting markup is a little horrible bulky, so you could feasibly convert this to be generated by javascript on browsers that supported opacity - and possibly using any "height" of fade out. The current version supports only 20px of fade.

css

.outer {
    background: url('...') repeat fixed;
    height: 200px;
    overflow: auto;
}

.news {
    position: relative;
    width: 300px;
    height: 100px;
    overflow: hidden;
}

.news .fadeout {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.news .fadeout .fadeline {
    height: 2px;
    background: url('...') repeat fixed;
}

/* a good idea to add vendor prefixed versions of opacity here */
.news .fadeout .o09 { opacity: 0.9; }
.news .fadeout .o08 { opacity: 0.8; }
.news .fadeout .o07 { opacity: 0.7; }
.news .fadeout .o06 { opacity: 0.6; }
.news .fadeout .o05 { opacity: 0.5; }
.news .fadeout .o04 { opacity: 0.4; }
.news .fadeout .o03 { opacity: 0.3; }
.news .fadeout .o02 { opacity: 0.2; }
.news .fadeout .o01 { opacity: 0.1; }

markup

<div class="outer">
    <div class="news">
        <h4>News</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
          suscipit dui ac lacus convallis dapibus. In cursus arcu at 
          arcu mollis vestibulum. Morbi ac quam sed nisl vulputate 
          aliquam in ac velit. Curabitur ac feugiat justo. Fusce 
          imperdiet, arcu non dignissim vulputate, leo odio ultricies 
          mauris, in consectetur risus odio malesuada sapien. 
          Nam sagittis convallis dictum. Duis eget lectus
        </p>
        <div class="fadeout">
            <div class="fadeline o01"></div>
            <div class="fadeline o02"></div>
            <div class="fadeline o03"></div>
            <div class="fadeline o04"></div>
            <div class="fadeline o05"></div>
            <div class="fadeline o06"></div>
            <div class="fadeline o07"></div>
            <div class="fadeline o08"></div>
            <div class="fadeline o09"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
        </div>
    </div>
    <div class="news">
        <h4>News</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
          suscipit dui ac lacus convallis dapibus. In cursus arcu at 
          arcu mollis vestibulum. Morbi ac quam sed nisl vulputate 
          aliquam in ac velit. Curabitur ac feugiat justo. Fusce 
          imperdiet, arcu non dignissim vulputate, leo odio ultricies 
          mauris, in consectetur risus odio malesuada sapien. 
          Nam sagittis convallis dictum. Duis eget lectus
        </p>
        <div class="fadeout">
            <div class="fadeline o01"></div>
            <div class="fadeline o02"></div>
            <div class="fadeline o03"></div>
            <div class="fadeline o04"></div>
            <div class="fadeline o05"></div>
            <div class="fadeline o06"></div>
            <div class="fadeline o07"></div>
            <div class="fadeline o08"></div>
            <div class="fadeline o09"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
        </div>
    </div>
    <div class="news">
        <h4>News</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
          suscipit dui ac lacus convallis dapibus. In cursus arcu at 
          arcu mollis vestibulum. Morbi ac quam sed nisl vulputate 
          aliquam in ac velit. Curabitur ac feugiat justo. Fusce 
          imperdiet, arcu non dignissim vulputate, leo odio ultricies 
          mauris, in consectetur risus odio malesuada sapien. 
          Nam sagittis convallis dictum. Duis eget lectus
        </p>
        <div class="fadeout">
            <div class="fadeline o01"></div>
            <div class="fadeline o02"></div>
            <div class="fadeline o03"></div>
            <div class="fadeline o04"></div>
            <div class="fadeline o05"></div>
            <div class="fadeline o06"></div>
            <div class="fadeline o07"></div>
            <div class="fadeline o08"></div>
            <div class="fadeline o09"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
            <div class="fadeline o10"></div>
        </div>
    </div>
</div>