Created
July 22, 2011 23:10
-
-
Save jeffkreeftmeijer/1100648 to your computer and use it in GitHub Desktop.
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
<style> | |
body{ | |
background-color: #333; | |
color: #222; | |
padding: 20px; | |
font-family: "Helvetica Neue", Helvetica; | |
line-height: 150%; | |
font-size: 14px; | |
text-shadow: 0 1px 1px #fff; | |
} | |
div.outer{ | |
margin: 10px auto; | |
max-width: 700px; | |
background-color: #888; | |
-webkit-border-radius: 8px; | |
-webkit-box-shadow: 0 0 10px #000; | |
} | |
div.inner{ | |
top: -5px; | |
padding: 20px; | |
position: relative; | |
background-color: #eee; | |
border-top: 1px solid #fff; | |
border-bottom: 1px solid #777; | |
-webkit-border-radius: 5px; | |
-webkit-box-shadow: inset 0 0 10px #666; | |
} | |
h1{ | |
font-size: 200%; | |
font-weight: 900; | |
margin: 10px 0 20px 0; | |
} | |
p{ | |
margin-bottom: 20px; | |
} | |
a.button{ | |
font-size: 120%; | |
font-weight: 900; | |
color: #eee; | |
text-align: center; | |
text-shadow: 0 -1px 1px #000; | |
text-decoration: none; | |
display: block; | |
background-color: #222; | |
-webkit-border-radius: 8px; | |
-webkit-box-shadow: 0 5px 5px #888; | |
margin-bottom: 5px; | |
border: 3px solid #000; | |
} | |
a.button span{ | |
top: -5px; | |
padding: 10px; | |
position: relative; | |
background-color: #444; | |
border-top: 1px solid #333; | |
display: block; | |
-webkit-border-radius: 5px; | |
-webkit-box-shadow: inset 0 0 10px #333; | |
} | |
a.button:active{ | |
-webkit-box-shadow: 0 2px 5px #888; | |
} | |
a.button:hover span{ | |
top: -4px; | |
} | |
a.button:active span{ | |
top: 0; | |
} | |
</style> | |
<div class="outer"> | |
<div class="inner"> | |
<h1>Lorem ipsum dolor sit amet</h1> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | |
</p> | |
<a class="button" href="#"><span>Go!</span></a> | |
</div> | |
</div> |
@beaumartinez thanks for putting it on jsFiddle for me! I updated it a little bit so it looks good when the default styles are reset: http://jsfiddle.net/byBSR/6/embedded/result/ :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Neat. For the curious, the gist as an interactive jsFiddle demo.