Skip to content

Instantly share code, notes, and snippets.

Created March 8, 2013 01:39
Show Gist options
  • Save anonymous/5113574 to your computer and use it in GitHub Desktop.
Save anonymous/5113574 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
@import url(http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica:400,400italic);
body {
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
#logo {
display: inline-block;
position: relative;
height: 200px;
width: 200px;
background-color: rgba(241, 241, 241, 1.0);
border: 1px solid rgba(221, 221, 221, 1.0);
padding: 25px;
border-radius: 3px;
box-shadow: inset 0px 0px 35px 3px rgba(201, 201, 201, 1.0);
border: 1px solid rgba(0, 0, 0, 0.2);
}
#logo:before, #logo:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
#logo:after {
right: 10px;
left: auto;
transform:skew(8deg) rotate(deg);
}
#logo-inner {
font-family: "Im Fell DW Pica";
height: 100%;
color: rgba(115, 115, 115, 1.0);
transition: color 5s ease-in-out;
text-align: center;
font-size: 150px;
border-radius: 3px;
}
#masthead-container {
display: inline-block;
}
#masthead {
position: relative;
display: block;
font-family: "Im Fell DW Pica";
vertical-align: top;
display: inline-block;
margin-left: 40px;
font-size: 90px;
color: rgba(80, 80, 80, 1.0);
max-height: 30%;
}
#rise-of-man {
position: relative;
display: block;
height: 150px;
width: auto;
}
.man {
display: inline-block;
width: 15%;
height: 33%;
}
.man2 {
display: inline-block; width: 15%;
height: 66%;
}
#man-1 {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
margin-left: 5px;
border-radius: 100%;
border-color: black;
background-color: black;
}
<div id="logo"><div id="logo-inner">Hr</div></div>
<div id="masthead-container">
<div id="masthead">Homo ridiculus</div>
<div id="rise-of-man">
<div class="man">
<div id="shape1"></div>
</div>
<div class="man">
<div id="shape2"></div>
</div>
<div class="man2">
<div id="shape3"></div>
</div>
<div class="man2">
<div id="shape4"></div>
</div>
<div class="man3">
<div id="shape5"></div>
</div>
<div class="man3">
<div id="shape6"></div>
</div>
</div>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment