Abe Fehr Abe Fehr - 6 days ago 5
CSS Question

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:


  • 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


Answer

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>

Comments