Skip to content

Instantly share code, notes, and snippets.

Created February 8, 2013 16:41
Show Gist options
  • Save anonymous/4740208 to your computer and use it in GitHub Desktop.
Save anonymous/4740208 to your computer and use it in GitHub Desktop.
A CodePen by YozhEzhi. Masked text - Forked @amanda Hawkins
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h1 class="ex1">mask-image</h1>
<h1 class="ex2">mask-image</h1>
<h1 class="ex3">mask-image</h1>
<h1 class="ex4">mask-image</h1>
</div>
</body>
</html>
/*==CSS Mask by Amanda Hawkins==*/
h1.ex1 {
-webkit-mask-image: url(http://ahhh.co/files/ex1.png);
-o-mask-image: url(http://ahhh.co/files/ex1.png);
-moz-mask-image: url(http://ahhh.co/files/ex1.png);
mask-image: url(http://ahhh.co/files/ex1.png);
color: #3f3f3f;
text-shadow: 2px 3px #fff, 7px 7px #c3c1c2;
}
h1.ex2 {
-webkit-mask-image: url(http://ahhh.co/files/ex2.png);
-o-mask-image: url(http://ahhh.co/files/ex2.png);
-moz-mask-image: url(http://ahhh.co/files/ex2.png);
mask-image: url(http://ahhh.co/files/ex2.png);
color: #ec4679;
text-shadow: 2px 3px #fff, 6px 6px #333;
}
h1.ex3 {
-webkit-mask-image: url(http://ahhh.co/files/ex3.png);
-o-mask-image: url(http://ahhh.co/files/ex3.png);
-moz-mask-image: url(http://ahhh.co/files/ex3.png);
mask-image: url(http://ahhh.co/files/ex3.png);
color: #1ba29a;
text-shadow: 2px 3px #fff, 4px 5px #1ba29a;
}
h1.ex4 {
-webkit-mask-image: url(http://ahhh.co/files/ex4.png);
-o-mask-image: url(http://ahhh.co/files/ex4.png);
-moz-mask-image: url(http://ahhh.co/files/ex4.png);
mask-image: url(http://ahhh.co/files/ex4.png);
color: #444;
text-shadow: 2px 3px #fff, 4px 5px #444;
}
/**** Other Stuff ***/
body {font-family: 'Oswald', sans-serif; font-size: 1em; background: #cdcdcd url(http://ahhh.co/files/white.png);}
div {padding: 30px;}
h1{font-size:6em; line-height: 1.2em; margin: 0 1em; padding: 0; text-transform: uppercase; float:left;}
p {padding: 3px 5px; font-size: 1; margin: 0; text-transform: uppercase;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment