CSS3 - Tworzenie tekstu z teksturą

 tekstura.jpg   19,98 KB   0 Ilość pobrań

-webkit-background-clip stawiony na "text" pozwala na przycięcie obrazu tła do powierzchni tekstu.
 

<div class="tlo">
    <h1>TEKST Z TEKSTURĄ</h1>
</div>

.tlo {
    background: url(http://th06.deviantart.net/fs70/PRE/f/2012/045/4/6/free_texture___background_by_katzengras84-d4poyln.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
 
.tlo h1 {
    font-size: 50px;
}

Demo: http://jsfiddle.net/Zonicpl/bkjz3005/