Tutorial: CSS watercolor text (text masking) comment
30.9.14


  First off, credits to Codrops for the original tutorial.  This tuto is a lot like the original tutorial as seen on Codrops, so you could might as well look up the more in-depth article in Codrops. But here's how I do it anyways;

The CSS :
.container {
width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 2em;
text-transform: uppercase;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
background: url(http://i.imgur.com/PYKJGH4.jpg); /*insert in the url of the background image */
background-size: cover;
outline: 1px solid transparent;
}

.container h1 {
font: 7em/100% "";
    font-family:"monotype corsiva";
margin:0 auto;
padding: 0;
text-align: center;
color: #fff;
-webkit-mask-image: url(http://i.imgur.com/hqfrWmW.png);/*url of masking image*/
mask-image: url(http://i.imgur.com/hqfrWmW.png);/*url of masking image*/
}


The HTML :
<div class="container">
<h1>Georgio Armana</h1>
</div>

There ya go, have fun :)

Labels: , , , ,