Текст-маска при помощи CSS

Создание такой текст-маски при помощи CSS достаточно простое.

Поэкспериментировать с свойствами можно в демо примере, ссылку на который вы видите чуть ниже.

HTML

<h1>SUMMER</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Chivo:900);

html {
 background: #eee url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5383/Nature-HD-Pictures.jpg") no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 font-family: 'Chivo', sans-serif;
 height: 100%;
 font-size: 62.5%;
}
body {
 min-height: 100%;
 display: table;
 width: 100%;
}
h1 {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 font-size: 20em;
 margin: 0 auto;
 padding: 0;
 text-align: center;
 color: #eee;
 -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5383/splatter-mask_1_1.png");
 mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5383/splatter-mask_1_1.png");
}