title: Fade the opacity of a `<ul>` as its goes down the page - CSS3
body: <p>Ive got a <code>&lt;ul&gt;</code> that I want to fade out as it goes down the page. Ive been experimenting with <code>linear-gradient</code> but couldnt get it to work. Is it even possible ? </p>
  
  <p>Ive made a JSFiddle example here : <a href="http://jsfiddle.net/trpa9qfr/1/" rel="nofollow">http://jsfiddle.net/trpa9qfr/1/</a></p>
  
  <p>Im trying to get the text to be faded as its gets further down the page.. ie. the word "SIX" would be barley visable, FIVE would be slightly more visable, FOUR would be slightly less visable that THREE... etc</p>
  
  <p>Another way to do this would be to target each <code>&lt;li&gt;</code> and give it its own opacity but id like the opacity to gradient throughout the word ie. the bottom of the word SIX would be less visable than the top of the word SIX.</p>
  
  <p>It could also be done by placing a div above the  but this wouldnt allow the  to be clickable and there is an image background on this page so the div would effect the look of this..</p>