%h1 Masked Text
View Compiled
@import url("https://fonts.googleapis.com/css?family=Fjalla+One");
body {
background: #edebf2;
text-align: center;
padding-top: 5em;
}
h1 {
font: normal 6em/1.1 'Fjalla One', Arial, sans-serif;
color: #5f5e61;
text-transform: uppercase;
border: .125em solid #5f5e61;
display: inline-block;
border-radius: .2em;
padding: .15em .15em 0.075em;
-webkit-mask-image: url(//f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
-webkit-transform: rotate(-3deg);
-moz-mask-image: url(//f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
-moz-transform: rotate(-3deg);
-o-mask-image: url(//f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
-o-transform: rotate(-3deg);
mask-image: url(//f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
transform: rotate(-3deg);
}
h1:before, h1:after { content: "×"; margin: 0 .125em; }
This Pen doesn't use any external CSS resources.