<div class="knockout"><a href="http://mksht.crisnoble.com" rel="Like cool shit? visit my site">mksht</a></div>
.knockout {
background: url(http://apod.nasa.gov/apod/image/0603/coma_misti.jpg) -80px -80px;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 100px;
font-family: arial, helvetica;
width: 600px;
margin: 50px auto;
text-align: center;
}
body{
background: #444;
}
//Today we will make knockout style text, in just CSS
//Warning: It will only work in webkit browswers (like chrome or safari)
//All of the credit for this technique goes to the unremebered person who I somehow got the code from here: http://jsfiddle.net/m3mkx/1/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.