/* css3 background-clip:text demo by @girlie_mac Cassiopeia A - Picture by NASA JPL http://www.jpl.nasa.gov */
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin" rel="stylesheet" type="text/css"> <article class="mask-galaxy"> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> <h1>Cassiopeia A</h1> </article>
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;} }