Some epicness going on here.
A Pen by Stefan Schnitzler on CodePen.
Some epicness going on here.
A Pen by Stefan Schnitzler on CodePen.
<div class="title"> | |
<h1>Headline1</h1> | |
<p>test</p> | |
<h1>Headline2</h1> | |
<p>test</p> | |
</div> |
body | |
{ | |
font-size: .85em; | |
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; | |
color: #232323; | |
background-color: #ddd; | |
background-image: url(images/linedpaper.png); | |
} | |
div.title { | |
position: relative; | |
z-index: 1; /* prevent shadows falling behind containers with backgrounds */ | |
overflow: hidden; | |
list-style: none; | |
margin: 0; | |
padding: 10px; | |
} | |
div.title h1 { | |
clear: both; | |
margin: 0 auto; | |
margin-bottom: 10px; | |
padding: 0; | |
line-height: 2em; | |
text-align: center; | |
text-shadow: 1px 1px 3px #aaa; | |
display: block; | |
position: relative; | |
float: left; | |
width: 20em; | |
height: 2em; | |
padding: 0; | |
border: 1px solid #efefef; | |
background: #fff; | |
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; | |
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; | |
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } | |
div.title h1:before, | |
div.title h1:after { | |
content: ''; | |
z-index: -1; | |
position: absolute; | |
left: 10px; | |
bottom: 10px; | |
width: 70%; | |
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ | |
max-height: 100px; | |
height: 55%; | |
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); | |
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); | |
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); | |
-webkit-transform: skew(-15deg) rotate(-3deg); | |
-moz-transform: skew(-15deg) rotate(-3deg); | |
-ms-transform: skew(-15deg) rotate(-3deg); | |
-o-transform: skew(-15deg) rotate(-3deg); | |
transform: skew(-15deg) rotate(-3deg); } | |
div.title h1:after { | |
clear: both; | |
left: auto; | |
right: 10px; | |
-webkit-transform: skew(15deg) rotate(3deg); | |
-moz-transform: skew(15deg) rotate(3deg); | |
-ms-transform: skew(15deg) rotate(3deg); | |
-o-transform: skew(15deg) rotate(3deg); | |
transform: skew(15deg) rotate(3deg); } | |
div.title p{ | |
clear: both; | |
} |