Skip to content

Instantly share code, notes, and snippets.

@ashumeow

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

Forked from cythux/Eric-Cartman-in-Pure-CSS.markdown
Last active December 27, 2015 11:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ashumeow/7321679 to your computer and use it in GitHub Desktop.
Save ashumeow/7321679 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Eric-Cartman-in-Pure-CSS.markdown
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<link rel = "stylesheet" type="text/css" href="style.css">
<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>
</body>
</html>
Raw
style.css
#Default
div{
height: 275px;
margin: 30px auto 0;
position: relative;
width: 300px;
}
#head
div{
left: 50%;
margin: 0 0 0 -112px;
position: relative;
top: 10px;
z-index: 2;
}
#head-content
div{
border-radius: 50%;
height: 182px;
width: 224px;
overflow: hidden;
}
#cap
div{
left: 0;
position: absolute;
top:0;
z-index: 2;
}
#cap-content,
#countenance-content
div{
border-radius: 50%;
height: 182px;
width: 224px;
overflow: hidden;
}
#cap-content
div{background: #00BBC9; }
#cap-detail
div{
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-1
div{
top: 5px;
left: 1px;
}
#cap-detail-2
div{
top: 1px;
left: 10px;
}
#cap-detail-3
div{
left: 15px;
top: 5px;
}
#cap-detail-4
div{
left: 24px;
top: 3px;
}
#cap-detail-5
div{
left: 33px;
top: 6px;
}
#cap-borda
div{
background: #FEE01C;
border-radius: 50%;
height: 182px;
margin: 48px 0 0 -29px;
width: 300px;
z-index: 3;
}
#countenance-full
div{
left: 0;
position: relative;
top:0;
z-index: 4;
}
#countenance
div{
background: #fdd6aa;
border-radius: 50%;
height: 182px;
margin: 57px 0 0 -30px;
width: 306px;
}
#countenance-1
div{
-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
div{
-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
div{
background: #fdd6aa;
}
#eye-detail
div{
border-left: 1px solid #666666;
border-radius: 50%;
height: 31px;
left: 55px;
position: absolute;
top: 15px;
width: 28px;
z-index: 5;
}
#eye
div{
-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
div{
left: 1px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
#eye.right
div{
right: 0;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
}
#iris
div{
-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
div{right: 13px;}
#eye.right.iris
div{left: 13px;}
#mouth
div{
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
div{
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
div{
background: #fff;
border-radius: 10%;
border-top: none;
float: left;
height: 13px;
margin: 0 1px;
width: 14px;
border-top: 2px solid #333;
}
#lip
div{
background: #FDD6AA;
height: 48px;
position: absolute;
top: 0;
width: 25px;
}
#lip.left
div{
left: 0;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
border-right: 2px solid #333333;
}
#lip.right
div{
right: 0;
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
border-left: 2px solid #333333;
}
#eyes-2
div{
height: 20px;
left: 50%;
margin: 0 0 0 -55px;
position: absolute;
top: 57px;
width: 110px;
}
#eye-2
div{
background: #333;
height: 2px;
position: absolute;
width: 55px;
}
#eye-2.left-top
div{
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
left: 0;
top: 21px;
}
#eye-2.left-bottom
div{
left: 0;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
top: 40px;
}
#eye-2.right-top
div{
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
right: 0;
top: 21px;
}
#eye-2.right-bottom
div{
right: 0;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
top: 40px;
}
#chin
div{
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
div{
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
div{
background: #ED314C;
border-radius: 50%;
height: 155px;
left: 4px;
position: absolute;
top: 106px;
width: 295px;
z-index: 1;
}
#shirt
div{
background: #ED314C;
border-radius: 50%;
height: 82px;
position: absolute;
width: 165px;
z-index: 2;
}
#shirt.det-1
div{
bottom: 0px;
right: 8px;
}
#shirt.det-2
div {
bottom: 0px;
left: 12px;
}
#hand
div{
background: #FFE11D;
border-radius: 50%;
height: 45px;
position: absolute;
top: 63px;
width: 50px;
z-index: 3;
}
#hand.left
div{left: -11px;}
#hand.right
div{right: -11px;}
#finger
div{
background: #FFE11D;
border: 1px solid #aaa;
border-radius: 50%;
height: 15px;
position: absolute;
top: 5px;
width: 15px;
z-index: 4;
}
#hand.left.finger
div{right: -5px;}
#hand.right .finger
div{left: -5px;}
#zipper
div{
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
div{
background: none repeat scroll 0 0 #333333;
border-radius: 50%;
height: 10px;
margin: 10px 27px;
width: 4px;
z-index: 6;
}
#leg
div{
background: #7d4935;
height: 70px;
left: 58px;
position: absolute;
top: 202px;
width: 190px;
z-index: 0;
}
#foot
div{
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
div{left: -25px;}
#foot.right
div{right: -25px;}
#thigh
div{
background: #7d4935;
height: 58px;
position: absolute;
top: 10px;
width: 25px;
z-index: 1;
}
#thigh.left
div{
left: -22px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
transform: rotate(-16deg);
}
#thigh.right
div{
right: -22px;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
transform: rotate(16deg);
}
#author
div{
bottom: 50px;
color: #777777;
font-size: 1.6em;
line-height: 1.2em;
position: absolute;
right: 20px;
}
#author-a
div{
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