Skip to content

Instantly share code, notes, and snippets.

@crismanNoble
Created September 20, 2012 22:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crismanNoble/3758820 to your computer and use it in GitHub Desktop.
Save crismanNoble/3758820 to your computer and use it in GitHub Desktop.
<div class="knockout"><a href="http://mksht.crisnoble.com" rel="Like cool shit? visit my site">mksht</a></div>
//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/
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment