Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created May 13, 2012 19:17
Show Gist options
  • Save anonymous/2689830 to your computer and use it in GitHub Desktop.
Save anonymous/2689830 to your computer and use it in GitHub Desktop.
Download ZIP
Carmencita
Raw
dabblet.css
/**
* Carmencita
*/
body {text-align:center;background:url('http://subtlepatterns.com/patterns/classy_fabric.png')}
.container {margin:80px auto 20px auto;height: 600px;width:300px;}
.carmen {position: relative;}
.carmen
.hair {
position: absolute;
width: 200px;
height: 141px;
background-color: black;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
-khtml-border-radius: 50px;
border-radius: 50px;
z-index: 0;
left: -26px;
top: -16px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
.carmen
.frinch {
position: absolute;
z-index: 3;
width: 0;
height: 0;
border-bottom: 50px solid black;
border-left: 60px solid transparent;
border-right: 50px solid transparent;
border-top: 30px solid transparent;
border-bottom-left-radius: 200px;
top: -30px;
left: 20px;
}
.carmen
.head {
position:absolute;
z-index:2;
width: 150px;
height:150px;
background-color:#FFEACE;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-o-border-radius: 200px;
-ms-border-radius: 200px;
-khtml-border-radius: 200px;
border-radius: 200px;
}
.rleg, .lleg {
position:absolute;
z-index:1;
width: 24px;
height:80px;
background-color:#FFEACE;
border-bottom:15px solid red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
-khtml-border-radius: 50px;
border-radius: 50px;
top:305px;
}
.lleg { left:55px;}
.rleg {left:85px;}
.leye, .reye {
position:absolute;
width:14px;
height:14px;
background-color:#669900;
border: 6px solid #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
top:55px;
z-index:3;
}
.leye { left:35px;}
.reye { left:90px;}
.carmen
.mouth {
width: 0;
height: 0;
border-right: 30px solid transparent;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: absolute;
z-index: 4;
top: 90px;
left: 64px;
border-bottom: 19px solid red;
}
.carmen
.neck {
width: 0;
height: 0;
border-right: 30px solid transparent;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: absolute;
z-index: 1;
top: 140px;
left: 64px;
border-bottom: 19px solid #FEE1C5;
}
.carmen
.dress {
height: 100px;
position: absolute;
z-index: 0;
top: 140px;
left: 29px;
border-bottom: 0px solid red;
background-color: red;
border-top: 36px solid #990000;
width: 75px;
border-radius: 30px;
border-left: 13px dotted #990000;
border-right: 14px dotted #990000;
border-radius: 30px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.carmen
.skirt {
height: 0;
position: absolute;
z-index: 2;
width: 73px;
border-bottom: 80px solid #3D85B6;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 240px;
left: 4px;
}
Raw
dabblet.html
<div class="container">
<div class="carmen">
<div class="leye"></div>
<div class="reye"></div>
<div class="mouth"></div>
<div class="hair"></div>
<div class="frinch"></div>
<div class="head"></div>
<div class="dress"></div>
<div class="neck"></div>
<div class="skirt"></div>
<div class="lleg"></div>
<div class="rleg"></div>
</div>
</div>
<!-- content to be placed inside <body>…</body> -->
Raw
settings.json
{"view":"split-vertical","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