Reddit Alien in Pure CSS

by por

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

HTML

<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>

CSS

/* * 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;
    -webkit-border-radius: 5px 0 0 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;
    -webkit-transform: rotate(16deg);
    -moz-transform: rotate(16deg);
    -o-transform: rotate(16deg);
}

#reddit-alien .dot {
    width: 26px;
    height: 26px;
    left: 37px;
    top: -28px;
    border: 8px solid black;
    -webkit-border-radius: 26px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 26px;
    border-radius: 26px;
    background: white;
}

#reddit-alien .ear {
    width: 32px;
    height: 32px;
    top: 100px;
    border: 8px solid black;
    -webkit-border-radius: 32px;
    -webkit-background-clip: padding-box;
    -moz-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;
    -webkit-border-radius: 150px 100px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 150px / 100px;
    border-radius: 150px / 100px;
    background: white;
}

#reddit-alien .eye {
    z-index: 2;
    width: 32px;
    height: 32px;
    top: 29px;
    -webkit-border-radius: 16px;
    -moz-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;
    -webkit-border-radius: 150px 120px;
    -moz-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;
    -webkit-border-radius: 120px 250px;
    -webkit-background-clip: padding-box;
    -moz-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;
    -webkit-background-clip: padding-box;
}

#reddit-alien .arm.left {
    left: 78px;
    -webkit-border-radius: 43px 0 0 43px;
    -moz-border-radius: 80px 0 0 90px;
    border-radius: 43px 0 0 43px;
}

#reddit-alien .arm.right {
    left: 170px;
    -webkit-border-radius: 0 43px 43px 0;
    -moz-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;
    -webkit-background-clip: padding-box;
}

#reddit-alien .foot.left {
    -webkit-border-radius: 24px 24px 0 0;
    -moz-border-radius: 30px 0 0 10px;
    border-radius: 24px 24px 0 0;
    left: 82px;
}

#reddit-alien .foot.right {
    -webkit-border-radius: 24px 24px 0 0;
    -moz-border-radius: 0 30px 10px 0;
    border-radius: 24px 24px 0 0;
    left: 156px;
}

Browser Screenshots (1)

Load Hide

More Items

Add New Comment

Showing Comments

Guest

Looks great but you should give credit to the original author if you are posting their work. :)
http://timbormans.com/code/red…

4 Months ago

ddrt

That’s who created this post. There’s a link directly to his site immediately under the alien.

3 Months ago

Submit Your Creation

Submissions are most welcome! Also Share your feedbacks (using the feedback button on the right) and help us improve.

Join us on Google+ now.

Follow @cssdeck

About

A Collection of Pure CSS Creations! Let's form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS. Hopefully the creations will help them get better at the new features of CSS (and in general too) and they'll start making more use of it in their projects :)

Lots of new exciting features coming soon! Stay Tuned.

Login with

Twitter

Github

Reddit Alien in Pure CSS

HTML

CSS

Browser Screenshots (1)

More Items

Solitary CSS3 Slider...

Stylish Ordered List

Pure CSS Calendar

Yahoo! Messenger Smiley...

CSS Buttons with...

Pure CSS3 Classic Train