Skip to content

Instantly share code, notes, and snippets.

@pixbit

pixbit/index.html

Created July 27, 2012 01:16
Show Gist options
  • Save pixbit/3185609 to your computer and use it in GitHub Desktop.
Save pixbit/3185609 to your computer and use it in GitHub Desktop.
Download ZIP
Circular Tabs/Business Card
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circular Tabs &middot; CodePen</title>
<!--
Copyright (c) 2012 Philip Zastrow, http://codepen.io/phanza
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<style>
body, div:after, div:before{
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAABGdBTUEAALGPC/xhBQAAG/VJREFU eNrtXduOG8cO7F8yBnpQA9PAoAH9/x/5WLviTLFYZMtBcmI7+xBs5F1Jo1HzViwW230/vt/u+/f9 mN+/3e7fn4/x53483OMxr8fP5+Hj7cdjfP7t9Xi79Y/XucHvn483eD7/xOff+jh/9nHI6zw/x3h+ jv79eL3Oga/3ev7zJ74P/rTX/7i+H69zXe+U90PdJ3yeuz77HB/3+3HeF3ze83221++z+yrf/8fn vtHznu/X8Kbaf/ak5xPwS7H/7MNmv7cXr17v+fN6vev98eY8/8Y+9MfrvF4zu5n293g9+Hx7/+fn 5evDx3Y/tnt314/Xi9dv1/HxHj9eBz8PHj71fs/n9dfvt/s9vN/z35+HdKP7hddr12PXi99nUxZn X6KduOskdXei+GTxyfuwiHDSZzj56EHQ0p8/+5juptnNscf4vPNm0d+r90VLMku359lP+7xsScqi 7HldeDq2YHw/5wFfh/PG9xX+Xd1Pu07lmRpaBn7zeJM+Tn7fzy85szx8fN4sPHnDW5L9PZ9cthx7 DfXYn+QpPc2dns+W9Xw/uzmnZcGX+fn5h7Rk9hwff/fjv+11aJXl2r/ZIbLfHzNa5nUdPb1+u98q PDT8R/zJMZNPqt0MjkF2SOzDqROpX3cGy8KL7UksPM73eyxjH+cSH5/j8M9XlpfFRHUf+Cbb9Y4z 5s7yPtwTD6R+buI+8es2FVOfF20xBU/SZZmTfj+d5akYpD6E/X0/LXd3h4gt1yzdeQpw79vrGtBT 6Bj6mchsbOl0WPn6laf4eD/yXOjp7Pqe92sDz2WPQ8w9D80ur/9WJFx2fyxRDDEYP5zKVj9i3Ctb G6/Af1AWHWOfj5U9vN5xxs7ry99lDhA8wfOwDfxyfAzDLB49E17HIA+grlPHbp3tmufqIisP2TTH ZLhu9IQqm7b3R48UrufH52n/lWxSxegs2+ZEk7P5z/+uhPN5vc+/s8OOlmf3w4yD3//j8L0+g89B Oni63Sdur78/5pXDyBzhx/u1cWT14HTuxZ1Ayj5VLGUL5Fgx5uN8HawPuR5VOYK6XgsrpyWNWYYH +3mIk4+fD68br3NAAhRff3fZOL/vWY2Iz3PmMsdD5g4WLg+BR3yGiwnvs39aMFuKuRm23KsOnUWM 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") #33383b; }
body{ background-position:top center; }
div { height:20em; width:35em; position:relative; margin:3em auto; padding:5em; box-shadow:0 1px 4px rgba(0,0,0,0.7), 0 1px #fff inset, 0 0 5em rgba(0,0,0,0.2) inset, 0 0 2em rgba(0,0,0,0.5); box-sizing:border-box; background:#eee; }
div:after, div:before { height:4em; width:4em; position:absolute; content:''; border-radius:50%; }
div:after { left:-2em; top:-2em; box-shadow:4px 4px 3px rgba(0,0,0,0.2), 1px 1px #000; }
div:before { right:-2em; bottom:-2em; box-shadow:-2px -2px 4px rgba(0,0,0,0.2), -1px -1px rgba(255,255,255,0.6); }
h1{ margin:0.625em 0 0; color:#666; font-family:'HelveticaNeue-Light', Helvetica, Arial, sans-serif; font-size:3em; font-weight:normal; text-align:center; text-shadow:0 1px #fff; }
h1:before { color:#0066cc; content:'@'; text-shadow:0 1px #fff; }
h2 { margin:0; color:#333; font-family:'HelveticaNeue-Bold', Helvetica, Arial, sans-serif; font-size:1em; font-weight:900; letter-spacing:0.125em; text-align:center; text-shadow:0 1px #fff; text-transform:uppercase; }
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: normal !important;
word-spacing: 0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
text-shadow: none !important;
border: 0 !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
// window.alert = function(){}; we're going to allow alerts for now
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
</head>
<body>
<body>
<div>
<h1>zastrow</h1>
<h2>Web Designer</h2>
</div>
</body>
<script src="http://codepen.io/javascripts/libs/modernizr.js"></script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/phanza/pen/tyhxE" target="_blank">Edit this Pen</a>
</div>
</body>
</html>
Raw
markup.html
<body>
<div>
<h1>zastrow</h1>
<h2>Web Designer</h2>
</div>
</body>
Raw
style.css
body, div:after, div:before{
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAABGdBTUEAALGPC/xhBQAAG/VJREFU eNrtXduOG8cO7F8yBnpQA9PAoAH9/x/5WLviTLFYZMtBcmI7+xBs5F1Jo1HzViwW230/vt/u+/f9 mN+/3e7fn4/x53483OMxr8fP5+Hj7cdjfP7t9Xi79Y/XucHvn483eD7/xOff+jh/9nHI6zw/x3h+ jv79eL3Oga/3ev7zJ74P/rTX/7i+H69zXe+U90PdJ3yeuz77HB/3+3HeF3ze83221++z+yrf/8fn vtHznu/X8Kbaf/ak5xPwS7H/7MNmv7cXr17v+fN6vev98eY8/8Y+9MfrvF4zu5n293g9+Hx7/+fn 5evDx3Y/tnt314/Xi9dv1/HxHj9eBz8PHj71fs/n9dfvt/s9vN/z35+HdKP7hddr12PXi99nUxZn X6KduOskdXei+GTxyfuwiHDSZzj56EHQ0p8/+5juptnNscf4vPNm0d+r90VLMku359lP+7xsScqi 7HldeDq2YHw/5wFfh/PG9xX+Xd1Pu07lmRpaBn7zeJM+Tn7fzy85szx8fN4sPHnDW5L9PZ9cthx7 DfXYn+QpPc2dns+W9Xw/uzmnZcGX+fn5h7Rk9hwff/fjv+11aJXl2r/ZIbLfHzNa5nUdPb1+u98q PDT8R/zJMZNPqt0MjkF2SOzDqROpX3cGy8KL7UksPM73eyxjH+cSH5/j8M9XlpfFRHUf+Cbb9Y4z 5s7yPtwTD6R+buI+8es2FVOfF20xBU/SZZmTfj+d5akYpD6E/X0/LXd3h4gt1yzdeQpw79vrGtBT 6Bj6mchsbOl0WPn6laf4eD/yXOjp7Pqe92sDz2WPQ8w9D80ur/9WJFx2fyxRDDEYP5zKVj9i3Ctb G6/Af1AWHWOfj5U9vN5xxs7ry99lDhA8wfOwDfxyfAzDLB49E17HIA+grlPHbp3tmufqIisP2TTH ZLhu9IQqm7b3R48UrufH52n/lWxSxegs2+ZEk7P5z/+uhPN5vc+/s8OOlmf3w4yD3//j8L0+g89B Oni63Sdur78/5pXDyBzhx/u1cWT14HTuxZ1Ayj5VLGUL5Fgx5uN8HawPuR5VOYK6XgsrpyWNWYYH +3mIk4+fD68br3NAAhRff3fZOL/vWY2Iz3PmMsdD5g4WLg+BR3yGiwnvs39aMFuKuRm23KsOnUWM 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") #33383b; }
body{ background-position:top center; }
div { height:20em; width:35em; position:relative; margin:3em auto; padding:5em; box-shadow:0 1px 4px rgba(0,0,0,0.7), 0 1px #fff inset, 0 0 5em rgba(0,0,0,0.2) inset, 0 0 2em rgba(0,0,0,0.5); box-sizing:border-box; background:#eee; }
div:after, div:before { height:4em; width:4em; position:absolute; content:''; border-radius:50%; }
div:after { left:-2em; top:-2em; box-shadow:4px 4px 3px rgba(0,0,0,0.2), 1px 1px #000; }
div:before { right:-2em; bottom:-2em; box-shadow:-2px -2px 4px rgba(0,0,0,0.2), -1px -1px rgba(255,255,255,0.6); }
h1{ margin:0.625em 0 0; color:#666; font-family:'HelveticaNeue-Light', Helvetica, Arial, sans-serif; font-size:3em; font-weight:normal; text-align:center; text-shadow:0 1px #fff; }
h1:before { color:#0066cc; content:'@'; text-shadow:0 1px #fff; }
h2 { margin:0; color:#333; font-family:'HelveticaNeue-Bold', Helvetica, Arial, sans-serif; font-size:1em; font-weight:900; letter-spacing:0.125em; text-align:center; text-shadow:0 1px #fff; text-transform:uppercase; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment