Make Last Three Rows of Table Increasingly Transparent, Merging into Background

css

Solution

I'd suggest looking into css masks. I've thrown together a quick JSFiddle that shows how a mask might help you accomplish what you're looking for:

ie:

table {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0.00,  rgba(0,0,0,1)),
    color-stop(0.70,  rgba(0,0,0,1)),
    color-stop(1.00,  rgba(0,0,0,0)));
}

http://jsfiddle.net/Fp7dE/

You can learn more about masks here: http://css-tricks.com/webkit-image-wipes/

Problem

I have a scrollable div containing a table and I want the last three visible rows to become less and less clear, slowly fading into the background color. The effect would be much like this (http://css-tricks.com/examples/FadeOutBottom/), but with a table. Initially I was selecting the last three visible rows of the div and applying lowering degrees of opacity to the elements. This worked, but required me to constantly reassess which were the last three rows as scrolling occurred; mayhem. My next idea was to apply a div over the table that would mimic the background of the page and be (initially) 100% transparent but then slowly decrease transparency as it applied the mimicked background, effectively hiding the rows more and more. But my background isn't a constant color, it's a gradient that goes from color A to color B and I am having large issues mimicking that background without creating it in the exact same way (height 100% of page, gradient from color A to color B). If I could do that but then also say, hey div with the exact coloring of my background, I would like you to initially be 100% transparent so the actual background is seen at the top of the div but the bottom x percent of your body I'd like to have an decreased transparency level so your color is applied over the underlying table thus dimming the text...well, that'd be perfect. I initially thought going from transparent to gradient B would accomplish what I was looking for but no dice; in retrospect it's unsurprising that the steps of colors to go from color A to color B are not the same steps of color that occur when going from transparent to color B. Working on a quick jFiddle now, but thought I'd put this out there in case there was a simple CSS component or technique I had overlooked.

Original source