Skip to content

Instantly share code, notes, and snippets.

@cythux

cythux/Eric-Cartman-in-Pure-CSS.markdown

Created November 5, 2013 16:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cythux/7321569 to your computer and use it in GitHub Desktop.
Save cythux/7321569 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Luiz Felipe Tartarotti Fialho.
Raw
Eric-Cartman-in-Pure-CSS.markdown
Raw
index.html
<div class="full">
<div class="cap-detail">
<div class="it-1"></div>
<div class="it-2"></div>
<div class="it-3"></div>
<div class="it-4"></div>
<div class="it-5"></div>
</div>
<div class="head">
<div class="head-content">
<div class="cap">
<div class="cap-content">
<div class="cap-borda">
</div>
</div>
</div>
<div class="countenance-full">
<div class="countenance-content">
<div class="countenance">
<div class="countenance-model countenance-2">
<div class="eyes-2">
<div class="eye-2 left-top">
</div>
<div class="eye-2 left-bottom">
</div>
<div class="eye-2 right-top">
</div>
<div class="eye-2 right-bottom">
</div>
</div>
<div class="mouth-2">
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="lip left"></div>
<div class="lip right"></div>
</div>
<div class="chin"></div>
<div class="fat"></div>
</div>
<div class="countenance-model countenance-1">
<div class="eyes-2">
<div class="eye-detail">
</div>
<div class="eye left">
<div class="iris"></div>
</div>
<div class="eye right">
<div class="iris"></div>
</div>
</div>
<div class="mouth"></div>
<div class="chin"></div>
<div class="fat"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="body">
<div class="hand left">
<div class="finger"></div>
</div>
<div class="hand right">
<div class="finger"></div>
</div>
<div class="shirt det-1"></div>
<div class="shirt det-2"></div>
<div class="zipper">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</div>
<div class="leg">
<div class="thigh left"></div>
<div class="thigh right"></div>
<div class="foot left"></div>
<div class="foot right"></div>
</div>
</div>
<p class="author">
Luiz Felipe Tartarotti Fialho<br>
<a title="@LFeh" href="http://twitter.com/LFeh">@LFeh</a><br>
<a title="@LFeh" href="http://www.felipefialho.com/">http://www.felipefialho.com/</a><br>
</p>
Raw
style.css
/****************** Default **********************/
.full{
height: 275px;
margin: 30px auto 0;
position: relative;
width: 300px;
}
/****************** HEAD **********************/
.head{
left: 50%;
margin: 0 0 0 -112px;
position: relative;
top: 10px;
z-index: 2;
}
.head-content{
border-radius: 50%;
height: 182px;
width: 224px;
overflow: hidden;
}
.cap{
left: 0;
position: absolute;
top:0;
z-index: 2;
}
.cap-content,
.countenance-content{
border-radius: 50%;
height: 182px;
width: 224px;
overflow: hidden;
}
.cap-content{background: #00BBC9; }
.cap-detail{
height: 20px;
left: 120px;
position: absolute;
top: 0;
width: 55px;
z-index: 5;
}
.cap-detail div{
border-radius: 50%;
background: #ffe11d;
width: 20px;
height: 14px;
position: absolute;
}
.cap-detail .it-1{
top: 5px;
left: 1px;
}
.cap-detail .it-2{
top: 1px;
left: 10px;
}
.cap-detail .it-3{
left: 15px;
top: 5px;
}
.cap-detail .it-4{
left: 24px;
top: 3px;
}
.cap-detail .it-5{
left: 33px;
top: 6px;
}
.cap-borda{
background: #FEE01C;
border-radius: 50%;
height: 182px;
margin: 48px 0 0 -29px;
width: 300px;
z-index: 3;
}
.countenance-full{
left: 0;
position: relative;
top:0;
z-index: 4;
}
.countenance{
background: #fdd6aa;
border-radius: 50%;
height: 182px;
margin: 57px 0 0 -30px;
width: 306px;
}
.countenance-1{
-webkit-animation: countenance 7s infinite step-start 0s;
-moz-animation: countenance 7s infinite step-start 0s;
-o-animation: countenance 7s infinite step-start 0s;
-ms-animation: countenance 7s infinite step-start 0s;
animation: countenance 7s infinite step-start 0s;
}
.countenance-2{
-webkit-animation: countenance-2 7s infinite step-start 0s;
-moz-animation: countenance-2 7s infinite step-start 0s;
-o-animation: countenance-2 7s infinite step-start 0s;
-ms-animation: countenance-2 7s infinite step-start 0s;
animation: countenance-2 7s infinite step-start 0s;
}
.countenance-model{
background: #fdd6aa;
}
.eye-detail{
border-left: 1px solid #666666;
border-radius: 50%;
height: 31px;
left: 55px;
position: absolute;
top: 15px;
width: 28px;
z-index: 5;
}
.eye{
-webkit-animation: eyes 3s infinite step-start 0s;
-moz-animation: eyes 3s infinite step-start 0s;
-o-animation: eyes 3s infinite step-start 0s;
-ms-animation: eyes 3s infinite step-start 0s;
animation: eyes 3s infinite step-start 0s;
background: none repeat scroll 0 0 #FFF;
border:2px solid #D8D2C7;
border-radius: 50%;
height: 60px;
position: absolute;
top: 2px;
width: 53px;
z-index: 6;
}
.eye.left{
left: 1px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
.eye.right{
right: 0;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.iris{
-webkit-animation: iris 3s infinite step-start 0s;
-moz-animation: iris 3s infinite step-start 0s;
-o-animation: iris 3s infinite step-start 0s;
-ms-animation: iris 3s infinite step-start 0s;
animation: iris 3s infinite step-start 0s;
background: none repeat scroll 0 0 #000000;
border-radius: 50%;
height: 6px;
position: absolute;
top: 20px;
width: 6px;
z-index: 7;
}
.eye.left .iris{right: 13px}
.eye.right .iris{left: 13px}
.mouth{
border-bottom: 2px solid #333333;
border-radius: 50%;
bottom: 32px;
height: 12px;
left: 50%;
margin: 0 0 0 -15px;
position: absolute;
width: 30px;
z-index: 8;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg)
-o-transform: rotate(5deg)
transform: rotate(5deg)
}
.mouth-2{
background: #333;
border-bottom: 2px solid #333333;
bottom: 25px;
height: 25px;
left: 50%;
margin: 0 0 0 -40px;
position: absolute;
width: 80px;
z-index: 8;
}
.tooth{
background: #fff;
border-radius: 10%;
border-top: none;
float: left;
height: 13px;
margin: 0 1px;
width: 14px;
border-top: 2px solid #333;
}
.lip{
background: #FDD6AA;
height: 48px;
position: absolute;
top: 0;
width: 25px;
}
.lip.left{
left: 0;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
border-right: 2px solid #333333;
}
.lip.right{
right: 0;
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
border-left: 2px solid #333333;
}
.eyes-2{
height: 20px;
left: 50%;
margin: 0 0 0 -55px;
position: absolute;
top: 57px;
width: 110px;
}
.eye-2{
background: #333;
height: 2px;
position: absolute;
width: 55px;
}
.eye-2.left-top{
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
left: 0;
top: 21px;
}
.eye-2.left-bottom{
left: 0;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
top: 40px;
}
.eye-2.right-top{
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
right: 0;
top: 21px;
}
.eye-2.right-bottom{
right: 0;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
top: 40px;
}
.chin{
border-bottom: 1px solid #333333;
border-radius: 50%;
bottom: 20px;
height: 12px;
left: 50%;
margin: 0 0 0 -23px;
position: absolute;
width: 46px;
z-index: 8;
}
.fat{
border-bottom: 1px solid #333333;
border-radius: 50%;
bottom: 10px;
height: 113px;
left: 50%;
margin: 0 0 0 -95px;
position: absolute;
width: 190px;
z-index: 8;
}
/****************** BODY **********************/
.body{
background: #ED314C;
border-radius: 50%;
height: 155px;
left: 4px;
position: absolute;
top: 106px;
width: 295px;
z-index: 1;
}
.shirt{
background: #ED314C;
border-radius: 50%;
height: 82px;
position: absolute;
width: 165px;
z-index: 2;
}
.shirt.det-1{
bottom: 0px;
right: 8px;
}
.shirt.det-2{
bottom: 0px;
left: 12px;
}
.hand{
background: #FFE11D;
border-radius: 50%;
height: 45px;
position: absolute;
top: 63px;
width: 50px;
z-index: 3;
}
.hand.left{left: -11px;}
.hand.right{right: -11px;}
.finger{
background: #FFE11D;
border: 1px solid #aaa;
border-radius: 50%;
height: 15px;
position: absolute;
top: 5px;
width: 15px;
z-index: 4;
}
.hand.left .finger{right: -5px;}
.hand.right .finger{left: -5px;}
.zipper{
border-radius: 20% 20% 20% 20%;
border-right: 1px solid #333333;
height: 70px;
left: 120px;
position: absolute;
top: 85px;
width: 35px;
z-index: 5;
}
.button{
background: none repeat scroll 0 0 #333333;
border-radius: 50%;
height: 10px;
margin: 10px 27px;
width: 4px;
z-index: 6;
}
/***********************************************************/
/****************** CORPO **********************/
/***********************************************************/
.leg{
background: #7d4935;
height: 70px;
left: 58px;
position: absolute;
top: 202px;
width: 190px;
z-index: 0;
}
.foot{
background: #2d2b38;
border-radius: 38%;
border-top: 1px solid #2D2B38;
box-shadow: -2px 6px 6px rgba(50, 50, 50, 0.42);
bottom: -7px;
height: 11px;
position: absolute;
width: 120px;
z-index: 1;
}
.foot.left{left: -25px;}
.foot.right{right: -25px;}
.thigh{
background: #7d4935;
height: 58px;
position: absolute;
top: 10px;
width: 25px;
z-index: 1;
}
.thigh.left{
left: -22px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.thigh.right{
right: -22px;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
transform: rotate(16deg);
}
/****************** AUTHOR **********************/
.author {
bottom: 50px;
color: #777777;
font-size: 1.6em;
line-height: 1.2em;
position: absolute;
right: 20px;
}
.author a {
color: #2B2B2B;
font-size: 0.8em;
font-weight: bolder;
text-decoration: underline;
}
/****************** ANIMATION **********************/
@-webkit-keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
@-moz-keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
@-o-keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
@keyframes iris {
0%, 100% {
opacity: 0;
}
15%, 95% {
opacity: 1;
}
}
@-moz-keyframes eyes {
0%, 100% {
background:#FDD6AA;
border-top: none;
}
15%, 95% {
background:#fff;
border: none;
border-top:2px solid #D8D2C7;
}
}
@-webkit-keyframes eyes {
0%, 100% {
background:#FDD6AA;
border-top: none;
}
15%, 95% {
background:#fff;
border: none;
border-top:2px solid #D8D2C7;
}
}
@-o-keyframes eyes {
0%, 100% {
background:#FDD6AA;
border-top: none;
}
15%, 95% {
background:#fff;
border: none;
border-top:2px solid #D8D2C7;
}
}
@keyframes eyes {
0%, 100% {
background:#FDD6AA;
border-top: none;
}
15%, 95% {
background:#fff;
border: none;
border-top:2px solid #D8D2C7;
}
}
@-moz-keyframes countenance {
0%, 100% {
opacity: 0;
}
25%, 65% {
opacity: 1;
}
}
@-webkit-keyframes countenance {
0%, 100% {
opacity: 0;
}
35%, 65% {
opacity: 1;
}
}
@-o-keyframes countenance {
0%, 100% {
opacity: 0;
}
35%, 65% {
opacity: 1;
}
}
@keyframes countenance {
0%, 100% {
opacity: 0;
}
35%, 65% {
opacity: 1;
}
}
@-moz-keyframes countenance-2 {
0%, 100% {
opacity: 1;
}
35%, 65% {
opacity: 0;
}
}
@-webkit-keyframes countenance-2 {
0%, 100% {
opacity: 1;
}
35%, 65% {
opacity: 0;
}
}
@-o-keyframes countenance-2 {
0%, 100% {
opacity: 1;
}
35%, 65% {
opacity: 0;
}
}
@keyframes countenance-2 {
0%, 100% {
opacity: 1;
}
35%, 65% {
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment