%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; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js