CODEWITHSUNDEEP
javascripthtmlcss
Abe Fehr
Abe Fehr

Reputation: 738

Fade bottom or top of text in a div

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:

Upvotes: 3

Views: 2050

Answers (3)

Samuel Cook
Samuel Cook

Reputation: 16828

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>

Upvotes: 3

sideroxylon
sideroxylon

Reputation: 4416

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

Upvotes: 0

Darren
Darren

Reputation: 13128

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

Upvotes: 1

Related Questions