Skip to content

Instantly share code, notes, and snippets.

@savage69kr

savage69kr/dabblet.css

Forked from clagom/dabblet.css
Created July 24, 2012 02:26
Show Gist options
  • Save savage69kr/3167625 to your computer and use it in GitHub Desktop.
Save savage69kr/3167625 to your computer and use it in GitHub Desktop.
Download ZIP
I'm not a clone! I'm a human being!
Raw
dabblet.css
/**
* I'm not a clone! I'm a human being!
*/
body{
background: #ffd200;
margin:0;
padding:0;
}
a:link, a:visited {
color: #333;
text-decoration: none;
}
a:hover {
color: #FF247C;
text-decoration: none;
}
.center{
position:absolute;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-205px;
text-align:center;
}
.helmet{
height:37px;
width:90px;
position:absolute;
top:0;
left:160px;
-webkit-border-radius:35px 35px 3px 3px;
-moz-border-radius:35px 35px 3px 3px;
border-radius:35px 35px 3px 3px;
border:3px solid #000;
background: #FFF;
background-image: linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -o-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -moz-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -ms-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.37, #fff),
color-stop(0.72, #ccc),
color-stop(0.86, #fff),
color-stop(0.96, #ccc);
);
}
.helmet:before{
content:"";
display:block;
position:absolute;
top:10px;
left:75px;
z-index:6px;
height:20px;
width:4px;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background: #FFF;
background-image: linear-gradient(top, #ccc 20%, #fff 100%);
background-image: -o-linear-gradient(top, #ccc 20%, #fff 100%);
background-image: -moz-linear-gradient(top, #ccc 20%, #fff 100%);
background-image: -webkit-linear-gradient(top, #ccc 20%, #fff 100%);
background-image: -ms-linear-gradient(top, #ccc 20%, #fff 100%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.20, #ccc),
color-stop(1, #fff);
);
}
.helmet:after{
content:"";
display:block;
position:absolute;
top:10px;
left:10px;
z-index:6px;
height:20px;
width:4px;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background: #FFF;
}
.grate{
border-top:3px dotted #333;
border-bottom:3px dotted #333;
width:15px;
height:0;
position:absolute;
left:150px;
top:83px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index:6;
}
.grate:before{
content:"";
display:block;
border-top:3px dotted #333;
border-bottom:3px dotted #333;
width:15px;
height:0;
position:absolute;
left:70px;
top:-76px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index:6;
}
.eyes{
height:28px;
width:100px;
position:absolute;
top:42px;
left:155px;
-webkit-border-radius:6px 6px 6px 6px;
-moz-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
border-left:3px solid #000;
border-right:3px solid #000;
border-top:3px solid #000;
background: #FFF;
background-image: linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -o-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -moz-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -ms-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.37, #fff),
color-stop(0.72, #ccc),
color-stop(0.86, #fff),
color-stop(0.96, #ccc);
);
}
.eyes:before{
content:"";
display:block;
height:0;
width:0;
background:none;
position:absolute;
top:2px;
left:10px;
border-top: 20px solid #000;
border-right: 30px solid transparent;
}
.eyes:after{
content:"";
display:block;
height:0;
width:0;
background:none;
position:absolute;
top:2px;
right:10px;
border-top: 20px solid #000;
border-left: 30px solid transparent;
}
.branchie{
display:block;
height:0;
width:0;
background:none;
position:absolute;
top:65px;
left:160px;
border-left: 8px solid #000;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
z-index:5;
}
.branchie:after{
content:"";
display:block;
height:0;
width:0;
background:none;
position:absolute;
top:-12px;
left:80px;
border-right: 8px solid #000;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.naso{
height:30px;
width:120px;
position:absolute;
top:70px;
left:145px;
-webkit-border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
border-radius:15px 15px 15px 15px;
border-left:3px solid #000;
border-right:3px solid #000;
background: #FFF;
background-image: linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -o-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -moz-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -ms-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.37, #fff),
color-stop(0.72, #ccc),
color-stop(0.86, #fff),
color-stop(0.96, #ccc);
);
}
.naso:before{
content:"";
display:block;
position:absolute;
top:0;
left:30px;
width: 0;
height: 0;
border-bottom: 15px solid #333;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
.naso:after{
content:"";
display:block;
position:absolute;
top:10px;
left: 35px;
width: 50px;
height: 40px;
-webkit-border-radius:80px 80px 80px 80px;
-moz-border-radius:80px 80px 80px 80px;
border-radius:80px 80px 80px 80px;
border-bottom:3px solid #000;
background: #FFF;
background-image: linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -o-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -moz-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -ms-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.37, #fff),
color-stop(0.72, #ccc),
color-stop(0.86, #fff),
color-stop(0.96, #ccc);
);
}
.buchi{
position:absolute;
top:105px;
left:170px;
width: 24px;
height: 14px;
background: #333;
z-index:6;
-moz-border-radius: 10px / 5px;
-webkit-border-radius: 10px / 5px;
border-radius: 10px / 5px;
-webkit-transform: rotate(26deg);
-moz-transform: rotate(26deg);
-o-transform: rotate(26deg);
transform: rotate(26deg);
}
.buchi:after{
content:"";
display:block;
position:absolute;
top:-25px;
left:49px;
width: 24px;
height: 14px;
background: #333;
z-index:6;
-moz-border-radius: 10px / 5px;
-webkit-border-radius: 10px / 5px;
border-radius: 10px / 5px;
-webkit-transform: rotate(-52deg);
-moz-transform: rotate(-52deg);
-o-transform: rotate(-52deg);
transform: rotate(-52deg);
}
.mento{
height:30px;
width:40px;
position:absolute;
top:90px;
left:160px;
-webkit-border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
border-radius:15px 15px 15px 15px;
border-left:3px solid #000;
border-bottom:3px solid #000;
-webkit-transform: rotate(26deg);
-moz-transform: rotate(26deg);
-o-transform: rotate(26deg);
transform: rotate(26deg);
background: #FFF;
background-image: linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -o-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -moz-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -ms-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.37, #fff),
color-stop(0.72, #ccc),
color-stop(0.86, #fff),
color-stop(0.96, #ccc);
);
}
.mento:before{
content:"";
display:block;
height:30px;
width:40px;
position:absolute;
top:-25px;
left:47px;
-webkit-border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
border-radius:15px 15px 15px 15px;
border-right:3px solid #000;
border-bottom:3px solid #000;
-webkit-transform: rotate(-52deg);
-moz-transform: rotate(-52deg);
-o-transform: rotate(-52deg);
transform: rotate(-52deg);
background: #FFF;
background-image: linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -o-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -moz-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -ms-linear-gradient(top, #fff 37%, #ccc 72%, #fff 86%, #ccc 96%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.37, #fff),
color-stop(0.72, #ccc),
color-stop(0.86, #fff),
color-stop(0.96, #ccc);
);
}
.mento:after{
content:"";
display:block;
height:20px;
width:20px;
position:absolute;
top:-8px;
left:47px;
-webkit-transform: rotate(-71deg);
-moz-transform: rotate(-71deg);
-ms-transform: rotate(-71deg);
-o-transform: rotate(-71deg);
transform: rotate(-71deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
border-bottom:3px dotted #333;
border-left:3px dotted #333;
background: #888;
background-image: linear-gradient(top, #888 37%, #ccc 52%, #888 66%, #ccc 76%, #888 86%);
background-image: -o-linear-gradient(top, #888 37%, #ccc 52%, #888 66%, #ccc 76%, #888 86%);
background-image: -moz-linear-gradient(top, #888 37%, #ccc 52%, #888 66%, #ccc 76%, #888 86%);
background-image: -webkit-linear-gradient(top, #888 37%, #ccc 52%, #888 66%, #ccc 76%, #888 86%);
background-image: -ms-linear-gradient(top, #888 37%, #ccc 52%, #888 66%, #ccc 76%, #888 86%);
background-image: -webkit-gradient(
linear,
top,
bottom,
color-stop(0.37, #888),
color-stop(0.52, #ccc),
color-stop(0.66, #888),
color-stop(0.76, #ccc),
color-stop(0.86, #888);
);
}
.didascalia{
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
font-size:16px;
color:#FF247C;
margin-top:180px;
margin-left:10px;
}
.social{
position:fixed;
bottom:0;
width:100%;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
font-size:14px;
color:#FF247C;
padding-bottom:10px;
}
Raw
dabblet.html
<div class="center">
<div class="riflessi">
</div>
<div class="grate">
</div>
<div class="eyes">
</div>
<div class="branchie">
</div>
<div class="naso">
</div>
<div class="buchi">
</div>
<div class="mento">
</div>
<div class="helmet">
</div>
<div class="didascalia">
I'm not a clone! I'm a human being!
</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment