CSS - Fading Text

CSS - Fading Text

by Nirvanachain

HTML

<div class="meta">
    <div class="copy">
        I'm about four hours into State of Decay, and I'm stuck on top of a water tower.
I have a rifle, three bullets and about 15 zombies 20 feet below me. And it's all because of a wristwatch. With goldfish on it.
Originally announced as Class 3, developer Undead Labs has finally brought its shambling, undead-driven open-world game State of Decay to life on Xbox Live Arcade. But there's more working under the hood of the developer's first release than just another Grand Theft Auto-inspired laundry list of busywork. By adding the player investment wrought by life and death decisions, State of Decay takes zombie fiction and open-world games to dark new places.

State of Decay thrusts you onto the city council of the zombie apocalypse
As State of Decay opens, the civilized world is crashing...
    </div>
</div>

CSS

.meta {
    position:relative;
    background-color:
}

.copy {line-height:1.5em;}

.meta:after {
content: "";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00E7E7E2',endColorstr='#FFE7E7E2');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,rgba(231,231,226,0)),color-stop(100%,#e7e7e2));
background-image: -webkit-linear-gradient(center bottom , #FFFFFF 15%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent);
background-image: -moz-linear-gradient(center bottom , #FFFFFF 15%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent);
background-image: -o-linear-gradient(center bottom , #FFFFFF 15%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent);
background-image: linear-gradient(center bottom , #FFFFFF 15%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent);
display: block;
position: absolute;
pointer-events: none;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
}