A Pen by Craig.

CSS3-Skewed-Text.markdown

CSS3 Skewed Text

A Pen by Craig on CodePen.

License.

index.html

<div>
  <h1 data-text="CSS3 Transforms">CSS3 Transforms</h1>
</div>

style.css

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

body {
  font-family: 'Play', sans-serif;
}

div {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  text-align: center;
}

h1 {
display: inline-block;
text-align: center;
colour: #ff5500;
text-transform: uppercase;
font-size: 60px;
-webkit-transform: rotate(-6deg) skew(-14deg);    
-moz-transform: rotate(-6deg) skew(-14deg);
-ms-transform: rotate(-6deg) skew(-14deg);
-o-transform: rotate(-6deg) skew(-14deg); 
position: relative;
z-index: 5;
white-space: nowrap;
border-top: solid 7px black;
border-bottom: solid 7px black;
line-height: 75px;
padding: 0 0 7px 0;
margin: 0;
}

h1:after {
  content: attr(data-text);
  display: inline-block;
  position: absolute;
  color: gray;
  top: 3px;
  left: 3px;
  z-index: -1;
  text-align: center;
  white-space:nowrap;
}