Calvacades

Just another blog on the net

Tutorial: CSS watercolor text (text masking)
30 Sep 2014 | Comment



  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: , , , ,

about

Hi, I'm Grace and I maintain this blog with my occasional musings. Apart from writing, I like being occupied with anything artsy, I enjoy the company of books and I like unleashing my inner nerd through occasional coding. My ideal day would be holding a book in one hand, matcha in the other, ears plugged and a cat purring on my lap.

links