Skip to content

Instantly share code, notes, and snippets.

@davidhund
Forked from anonymous/dabblet.css
Created September 20, 2012 15:26
Show Gist options
  • Save davidhund/3756595 to your computer and use it in GitHub Desktop.
Save davidhund/3756595 to your computer and use it in GitHub Desktop.
Untitled
body { background:#EEE; min-height: 60em; }
#logo {
XXXborder: 0 solid #FFF;
XXXborder-width: 0 .25em .25em 0;
XXXborder-radius: .125em;
width: 5em;
height: 5em;
background: #000;
color: #FFF;
font-size: 1.68em;
font-weight: normal;
padding: 1em;
margin: 0;
line-height: 1;
XXopacity: .3;
box-shadow:
5em 10em 0 18em rgba(200,200,0,0.025),
0 5em 0 5em rgba(0,200,200,0.05),
0 5em 0 15em rgba(0,0,200,0.05),
0 0 0 .5em rgba(255,255,255,.8)
;
text-align: center;
transform: rotate(-45deg);
position: absolute; /* or fixed, but you know... */
top: 0;
left: -3.5em;
transition: box-shadow .6s;
}
#logo:hover { box-shadow: none; }
#logo a {
color:#FFF;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
display: inline-block;
width: 50%;
transition: transform .6s;
/* http://davidwalsh.name/translate3d */
backface-visibility: hidden;
perspective: 1000;
position: absolute;
bottom: 1.125em;
right: .5em;
transform: rotate(45deg);
}
#logo a:hover,
#logo a:focus,
#logo a:active { transform: none; }
<h1 id="logo"><a href="#">David Hund</a></h1>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment