CSS3 background-clip:text

by Ayyappan Sakthivadivel

HTML

<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin" rel="stylesheet" type="text/css">

<article class="mask-galaxy">
    <h1>Cassiopeia A</h1>
</article>

CSS

h1 {
    font-family: "Lobster", sans-serif;
    font-size: 96px;
    font-weight: bold;
    text-align: center;
}

.mask-galaxy {
    background: url(http://www.jpl.nasa.gov/spaceimages/v2/getMediumImage.php?id=PIA03519) center center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: travelGalaxy 10s linear infinite;
    -moz-animation: travelGalaxy 10s linear infinite;
    -moz-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-animation: travelGalaxy 10s linear infinite;
    -o-text-fill-color: transparent;
    -o-background-clip: text;
    -o-animation: travelGalaxy 10s linear infinite;
}

@-webkit-keyframes travelGalaxy {
    0% {background-position: right bottom;}
    100% {background-position: left top;}
}
@-moz-keyframes travelGalaxy {
    0% {background-position: right bottom;}
    100% {background-position: left top;}
}

JavaScript

/* css3 background-clip:text demo
   by @girlie_mac

   Cassiopeia A - Picture by NASA JPL 
    http://www.jpl.nasa.gov
*/