Created
October 4, 2012 21:43
-
-
Save scneptune/3836661 to your computer and use it in GitHub Desktop.
A pure CSS3 fancy text banner using transforms, pseudo-elements, last-child, and more!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="banner"> | |
<div class="line"> | |
<span>Fancy Banners</span> | |
</div> | |
<div class="line"> | |
<span>Make It Look</span> | |
</div> | |
<div class="line"> | |
<span>Nice & Classy</span> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(http://fonts.googleapis.com/css?family=Oswald:400); | |
body { | |
background: #444; | |
font-size: 1em; | |
font-family: 'Oswald', 'Helvetica Neue', Helvetica; | |
line-height: 1.4; | |
} | |
.banner { | |
position: relative; | |
z-index: 1; | |
margin: 80px auto; | |
width: 330px; | |
} | |
.banner .line { | |
margin: 0 0 10px; | |
width: 100%; | |
height: 78px; | |
box-shadow: 10px 10px 10px rgba(0,0,0,0.05); | |
text-align: center; | |
text-transform: uppercase; | |
font-size: 3em; | |
line-height: 78px; | |
transform: skew(0, -15deg); | |
} | |
.banner .line:after, | |
.banner .line:first-child:before { | |
position: absolute; | |
top: 44px; | |
left: 0; | |
z-index: -1; | |
display: block; | |
width: 330px; | |
height: 78px; | |
border-radius: 4px; | |
background: rgba(180,180,180,0.8); | |
content: ''; | |
transform: skew(0, 15deg); | |
} | |
.banner .line:first-child:before { | |
top: -10px; | |
right: 0; | |
left: auto; | |
} | |
.banner .line:first-child:before, | |
.banner .line:last-child:after { | |
width: 0; | |
height: 0; | |
border-width: 38px; | |
border-style: solid; | |
border-color: rgba(180,180,180,0.8) rgba(180,180,180,0.8) transparent transparent; | |
background: transparent; | |
} | |
.banner .line:last-child:after { | |
top: 12px; | |
border-color: transparent transparent rgba(180,180,180,0.8) rgba(180,180,180,0.8); | |
} | |
.banner span { | |
display: block; | |
width: 100%; | |
height: 100%; | |
border-radius: 4px; | |
background: rgba(255,255,255,0.9); | |
color: #666; | |
text-shadow: 1px 1px 0 #444; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment