Skip to content

Instantly share code, notes, and snippets.

@nahuelsotelo

nahuelsotelo/dabblet.css

Created March 9, 2012 19:45
Show Gist options
  • Save nahuelsotelo/2008294 to your computer and use it in GitHub Desktop.
Save nahuelsotelo/2008294 to your computer and use it in GitHub Desktop.
Download ZIP
Kill Bill logo CSS version by @nahuelsotelo
Raw
dabblet.css
/*
* Kill Bill logo CSS version by @nahuelsotelo
* forge with Dabblet (http://dabblet.com)
* url: http://dabblet.com/gist/2008294
*/
body {
background: #fcf9e5;
}
.container {
background:#fada00 url(http://cl.ly/3D1u3a1d1X0f0Z391C1n/killbill_bg.jpg) center;
box-shadow:
1px 1px 0 #ae1600,
2px 2px 0 #ae1600,
3px 3px 0 #ae1600,
4px 4px 0 #ae1600,
5px 5px 0 #ae1600,
6px 6px 0 #ae1600,
7px 7px 0 #ae1600,
8px 8px 0 #ae1600,
9px 9px 0 #ae1600,
10px 10px 0 #ae1600;
margin: 4em auto;
padding: 2em 0 2em 6em;
position:relative;
width: 30em;
}
.container:after {
background: #000;
content: "";
display: block;
position:absolute;
top: 0;
right: 9em;
bottom: 0;
width: 4em;
}
h1 {
color:rgba(0,0,0,0);
font-family:Impact,helvetica,arial,clean,sans-serif;
font-size: 7em;
font-weight:normal;
letter-spacing: 0.05em;
line-height:0.9;
margin:0;
padding: 0;
position:relative;
text-transform:uppercase;
}
h1 span {
display:block;
position:relative;
}
h1 span:before,
h1 span:after {
color:#000;
position: absolute;
text-shadow: .03em .03em 0 #ae1600;
}
h1 span.k:before {
clip:rect(0,10em,.46em,0);
content: 'Kill';
top:.03em;
left:-.02em;
transform: rotate(-0.5deg);
}
h1 span.k:after {
clip:rect(.53em,10em,10em,0);
content: 'Kill';
top:0;
left:0.02em;;
transform: rotate(0.6deg);
}
h1 span.b:before {
clip:rect(0,10em,.44em,0);
content: 'Bill';
top:.03em;
left:-.02em;
transform: rotate(0deg);
}
h1 span.b:after {
clip:rect(.48em,10em,10em,0);
content: 'Bill';
top:0px;
left:2px;
transform: rotate(-.5deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<h1><span class="k">Kill</span> <span class="b">Bill</span></h1>
</div>
Raw
settings.json
{"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