CSS Reddit Alien

by Matthew James Taylor on 26 June 2009

CSS Reddit Alien - only 8KB!
O O _ ( ) ( ) O O O O / - o O O O O O O O O ( ) ( )

CSS can be lots of fun. Today I built the Reddit alien logo with pure CSS and text. He is actually a link that changes when you hover over him. I'm not the first to draw pictures this way, the CSS Homer by Roman Cortes is one of the best examples of CSS ASCII art.

The good thing about using text and CSS in this way is it's scalability. If you change the text size in your browser then the alien will get bigger (or smaller) along with all the other text. Because fonts are vector shapes - this means that CSS ASCII art is actually a form of vector art. It also means that the file size is always the same no matter how big the drawing is. If you need to put a large picture of the Reddit alien on your website and the image is bigger than 8KB then you would actually be better off (from a file size perspective) using this CSS version!

So how is he made?

It's really very simple. Here is the same alien without any CSS rules applied - stripped down to his bare link:


O O _ ( ) ( ) O O O O / - o O O O O O O O O ( ) ( )


He doesn't look like much, does he? He has a 'DNA sequence' of only 28 characters that mainly consist of O's (obviously O's have been very important in his past evolution). The HTML and CSS rules combined come to less than 8KB in file size.

The HTML

The link contains a number of characters, some are contained in strong tags, the other are in span tags.

<a id="r-a" href="http://reddit.com">
<span class="a">O</span>
<span class="b">O</span>
<span class="c">_</span>
<span class="d">(</span>
<span class="e">)</span>
<span class="f">(</span>
<span class="g">)</span>
<span class="h">O</span>
<span class="i">O</span>
<span class="j">O</span>
<span class="k">O</span>
<span class="l">/</span>
<span class="m">-</span>
<strong class="n">o</strong>
<strong class="o">O</strong>
<strong class="p">O</strong>
<strong class="q">O</strong>
<strong class="r">O</strong>
<strong class="s">O</strong>
<strong class="t">O</strong>
<span class="u">O</span>
<strong class="v">O</strong>
<strong class="w">•</strong>
<strong class="x">•</strong>
<span class="y">(</span>
<span class="z">)</span>
<span class="yy">(</span>
<span class="zz">)</span>
</a>

The CSS

The CSS is also pretty simple. Every character is positioned absolutely and it's size is specified in EM units. This allows us to easily change the size of the alien by changing the font-size parameter on the link element (all the characters in the link will scale relatively). The concentric lines that appear when you hover him are simply orange parentheses. The last two rules in the CSS make the hover work.

#r-a {
font-size:3em; /* change his size here */
width:5em;
height:3.3em;
overflow:hidden;
font-family:Verdana, Arial, sans-serif;
float:left;
background:#fff;
position:relative;
text-decoration:none;
color:#000;
}
#r-a span, #r-a strong {margin:0;padding:0;position:absolute;}
#r-a .a {left:1.65em;bottom:-.63em;}
#r-a .b {right:1.65em;bottom:-.63em;}
#r-a .c {left:.78em;bottom:-.08em;font-size:2.3em;}
#r-a .d {left:1em;bottom:0;font-size:1.8em;}
#r-a .e {right:1em;bottom:0;font-size:1.8em;}
#r-a .f {left:1.9em;bottom:.55em;font-size:.9em;}
#r-a .g {right:1.9em;bottom:.55em;font-size:.9em;}
#r-a .h {left:.84em;bottom:.55em;font-size:1.7em;}
#r-a .i {right:.84em;bottom:.55em;font-size:1.7em;}
#r-a .j {left:.83em;bottom:.41em;font-size:1.95em;}
#r-a .k {right:.83em;bottom:.41em;font-size:1.95em;}
#r-a .l {left:2.3em;bottom:2.1em;}
#r-a .m {left:2.57em;bottom:2.52em;}
#r-a .n {left:4.8em;bottom:4.55em;font-size:.6em;}
#r-a .o {left:1.8em;bottom:2.4em;font-size:.8em;}
#r-a .p {right:1.8em;bottom:2.4em;font-size:.8em;}
#r-a .q {left:1.01em;bottom:.6em;color:#fff;font-size:1.63em;}
#r-a .r {right:1.01em;bottom:.6em;color:#fff;font-size:1.63em;}
#r-a .s {left:1.14em;bottom:.8em;color:#fff;font-size:1.4em;}
#r-a .t {right:1.14em;bottom:.8em;color:#fff;font-size:1.4em;}
#r-a .u {left:1.53em;bottom:.9em;font-size:1.3em;}
#r-a .v {left:1.515em;bottom:.955em;font-size:1.29em;color:#fff;}
#r-a .w {left:2.7em;bottom:2.3em;font-size:.7em;color:#f30;}
#r-a .x {right:2.7em;bottom:2.3em;font-size:.7em;color:#f30;}
#r-a .y {left:.7em;bottom:1em;font-size:1.3em;color:#f30;}
#r-a .z {right:.7em;bottom:1em;font-size:1.3em;color:#f30;}
#r-a .yy {left:0;bottom:.495em;font-size:2em;color:#f30;}
#r-a .zz {right:0;bottom:.495em;font-size:2em;color:#f30;}
#r-a .y, #r-a .z, #r-a .yy, #r-a .zz {display:none;}
#r-a:hover .y, #r-a:hover .z, #r-a:hover .yy, #r-a:hover .zz {display:block;}

All the code above is free for anyone to use or experiment with, and it should work in all modern, standards-compliant browsers. Have fun!


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor

Related articles