Reddit Alien in Pure CSS
The Reddit Alien in CSS. No images, no canvas, just some CSS. Best viewed in a modern browser. Everything is created using CSS3 shapes and border radius.
Built by Tim Bormans
<div id="reddit-alien">
<div id="reddit-alien">
<div class="antenna">
<div class="dot"></div>
</div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="head">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
<div class="arm left"></div>
<div class="arm right"></div>
<div class="body"></div>
<div class="foot left"></div>
<div class="foot right">
</div>
/* * Reddit Alien **
/* * Reddit Alien **
*****************
================================================== */
#reddit-alien {
width: 296px;
height: 380px;
position: relative;
margin: 0 auto;
}
#reddit-alien div { position: absolute }
#reddit-alien .antenna {
height: 50px;
width: 44px;
top: 40px;
left: 155px;
border: 7px solid black;
border-width: 9px 0 0 9px;
border-radius: 5px 0 0 0;
background-clip: padding-box;
border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
transform: rotate(16deg);
transform: rotate(16deg);
transform: rotate(16deg);
}
#reddit-alien .dot {
width: 26px;
height: 26px;
left: 37px;
top: -28px;
border: 8px solid black;
border-radius: 26px;
background-clip: padding-box;
border-radius: 26px;
border-radius: 26px;
background: white;
}
#reddit-alien .ear {
width: 32px;
height: 32px;
top: 100px;
border: 8px solid black;
border-radius: 32px;
background-clip: padding-box;
border-radius: 32px;
border-radius: 32px;
background: white;
}
#reddit-alien .ear.left { left: 40px }
#reddit-alien .ear.right { left: 216px }
#reddit-alien .head {
z-index: 2;
top: 88px;
left: 52px;
height: 115px;
width: 182px;
border: 9px solid black;
border-radius: 150px 100px;
background-clip: padding-box;
border-radius: 150px / 100px;
border-radius: 150px / 100px;
background: white;
}
#reddit-alien .eye {
z-index: 2;
width: 32px;
height: 32px;
top: 29px;
border-radius: 16px;
border-radius: 16px;
border-radius: 16px;
background: orangeRed;
}
#reddit-alien .eye.left { left: 42px }
#reddit-alien .eye.right { left: 110px }
#reddit-alien .mouth {
z-index: 1;
width: 94px;
height: 80px;
top: 3px;
left: 35px;
border: 9px solid white;
border-bottom-color: black;
border-radius: 150px 120px;
border-radius: 150px / 120px;
border-radius: 150px / 120px;
}
#reddit-alien .body {
z-index: 1;
width: 88px;
height: 178px;
left: 100px;
top: 150px;
border: 8px solid black;
border-radius: 120px 250px;
background-clip: padding-box;
border-radius: 120px / 250px;
border-radius: 120px / 250px;
background: white;
}
#reddit-alien .arm {
height: 78px;
width: 39px;
top: 210px;
border: 8px solid black;
background: white;
background-clip: padding-box;
}
#reddit-alien .arm.left {
left: 78px;
border-radius: 43px 0 0 43px;
border-radius: 80px 0 0 90px;
border-radius: 43px 0 0 43px;
}
#reddit-alien .arm.right {
left: 170px;
border-radius: 0 43px 43px 0;
border-radius: 0 80px 90px 0;
border-radius: 0 43px 43px 0;
}
#reddit-alien .foot {
border: 8px solid black;
width : 50px;
height: 16px;
top: 312px;
background: white;
background-clip: padding-box;
}
#reddit-alien .foot.left {
border-radius: 24px 24px 0 0;
border-radius: 30px 0 0 10px;
border-radius: 24px 24px 0 0;
left: 82px;
}
#reddit-alien .foot.right {
border-radius: 24px 24px 0 0;
border-radius: 0 30px 10px 0;
border-radius: 24px 24px 0 0;
left: 156px;
}