webkit-background-clip

Imágenes en la tipografía con -webkit-background-clip

by kseso

HTML

<h1 class="pic">kseso</h1>
<h1>kseso</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Nunito:700);
html {background: tomato; font-family: nunito, sans-serif;}

h1 {
	color: #8AA9B8; 
/*	text-shadow: 2px 3px #fff, 6px 6px #333;*/
    font-size:8em;
    line-height: 1em;
    margin: 0 .1em;
    padding: 0;
    text-transform: uppercase;
    letter-spacing:5px; float: left;
}
h1.pic {
 color: #8AA9B8;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(https://lh6.googleusercontent.com/-VZhSlWvxlOA/UCPyXu9UgCI/AAAAAAAAEEI/yB-R1R0WM4M/s720/fuerzas-naturaleza6.jpg) repeat 50% 50%;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
 -webkit-text-stroke: 3px rgba(0,0,0,.3);
}