Fade bottom or top of text in a div

Question

I'd like to create a list with a particular size, but it's contents can be larger than the list.

I thought it would be real nice looking if the list had items in it and they faded out at the bottom and the top, while having a background image for the container that also contains the list. This is proving harder than expected, and I'm having a difficult time finding an appropriate guide for such a thing.

The images below shows the expected result

enter image description here

Is this even possible? Thanks in advance.

Edit:

I've looked at this and this, but I can't use those techniques because there's a background image in the background, not a solid color

And what have you tried? Since `:nth-child()/:last-child/etc/etc` could just have `opacity` thrown on them? — Darren, Feb 11 '15 at 03:48
I'd like to not modify the opacity of particular list elements, since that would require javascript to constantly check which ones are at the bottom of the div. I was thinking more along the lines of having some kind of mask(Photoshop terminology) over the list that had a gradient when necessary at the top or the bottom. I'll update the question to say what I've tried — Abe Fehr, Feb 11 '15 at 03:54

Samuel Cook · Accepted Answer · 2015-02-17T15:21:32.300

3

I was able to get an ugly prototype together. This only works with -webkit- browsers (Chrome, Safari, etc), but it might point you in the right direction and help you adapt to get it cross browser compatible.

.con{background:#0f0; color:#fff;}
ul{margin:0; padding:0; list-style:none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,  from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

<div class="con">
    <ul>
     <li>thing1</li>
     <li>thing2</li>
     <li>thing3</li>
     <li>thing4</li>
     <li>thing5</li>
     <li>thing6</li>
    </ul>
</div>

edited Feb 17 '15 at 15:21

answered Feb 11 '15 at 04:05

Samuel Cook

16,620
7
50
62

This is a fantastic solution! If only there were a cross-browser way :'( props to you though for keeping in touch with all the requirements – Abe Fehr Feb 11 '15 at 04:15
1

Actually, your answer led me to this, which I can most likely use: http://www.html5rocks.com/en/tutorials/masking/adobe/ – Abe Fehr Feb 11 '15 at 04:18

score 1 · Answer 2 · answered Feb 11 '15 at 04:00

1

It is rather simple to apply the opacity via jQuery to the elements. Take this as an example. We have a markup of the following:

<ul id="derp">
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
</ul>

Now using the following jQuery, we can apply the opacity to the elements.

jQuery(document).ready(function(){

    var count = jQuery("#derp li ").length;
    var interval = (10 / count) / 10;
    var newval = 1.0;

    jQuery("#derp li").each(function(i, item){
        if(i == 0) {
            newval = newval;
        } else {
            newval = parseFloat(newval) - parseFloat(interval);
        }
        jQuery(item).css('opacity', (newval));
    });

});

JSFiddle Example

answered Feb 11 '15 at 04:00

Darren

13,050
4
41
79

This is not ideal because of a case where I have many list items and the size of the list isn't very large. I updated your fiddle to show a possible situation: http://jsfiddle.net/1jytg3f6/1/ – Abe Fehr Feb 11 '15 at 04:10
@AbeFehr Why you you hide the overflow if your list `"isnt very large"` ? – Darren Feb 11 '15 at 05:20
By "isn't very large", I meant the size of the list, not the number of items. There are at least 10 items, and that number is growing. I have a limited space on the page where I can display that list and content that needs to go underneath it, which is why I'm hiding the overflow, or I'm just scrolling it in my case – Abe Fehr Feb 11 '15 at 05:22

sideroxylon · Answer 3 · 2015-02-11T04:11:37.810

You can do it with just HTML and CSS - apply a div over the content and give it a gradient background:

UPDATED after OP's comments.

HTML:

<div id = "body">
    <div id = "frame"></div>
        <div id = "content">
        ITEM<br/>
        ITEM<br/>
        ITEM<br/>
        ...
        </div>
</div>

CSS

#body {
    width:300px;
    height:300px;
    position:relative;
}
#frame {
    position:absolute;
    top:0;
    left:10%;
    width:80%;
    height:80%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 0.9));
}
#content {
    background:#eaeaea;
    width:100%;
    height:100%;
    text-align:center;
}

FIDDLE

Fade bottom or top of text in a div

3 Answers3