-webkit-mask-image

by kseso

HTML

<!DOCTYPE html>
<html>
	<head>
		<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	</head>	
	<body>
		
			<h1 class="ex1">ksesocss </h1>
			<h1 class="ex-1">ksesocss </h1>
			<h1 class="ex2">ksesocss </h1>
			<h1 class="ex-2">ksesocss </h1>
		
	</body>
</html>

CSS

/*==CSS Mask en base a un pen de Amanda Hawkins==*/
h1.ex1 {	
	-webkit-mask-image: url(http://ahhh.co/files/ex1.png);
}
h1.ex1, h1.ex-1 {
	color: #3f3f3f; 
	text-shadow: 2px 3px #fff, 7px 7px #c3c1c2;	
}

h1.ex2 {	
	-webkit-mask-image: url(http://ahhh.co/files/ex2.png);	
}
h1.ex2, h1.ex-2 {	
	color: #8AA9B8; 
	text-shadow: 2px 3px #fff, 6px 6px #333;	
}
	
body {font-family: 'Oswald', sans-serif; font-size: 1em; background: #eee;}
h1{font-size:5em; line-height: 1.2em; margin: 0 .5em 0 .2rem; padding: 0; text-transform: uppercase; letter-spacing:5px; float: left;}