Bits and pieces of my life
Tutorial: CSS watercolor text (text masking)

  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(; /*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(;/*url of masking image*/
mask-image: url(;/*url of masking image*/

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

There ya go, have fun :)

Labels: , , , ,

Newer Posts Older Posts