今天看到这篇有趣的文章，现在到处充斥着用CSS3实现各种效果，这篇就只使用简单的font-size，text和position实现的Reddit Alien。粗略地翻译了一下~~~
CSS很有趣。今天我用纯CSS和文本做一个Reddit alien 的 logo。它实际是一个链接，当你鼠标划上去时，会有所改变。我不是第一个用这种方式画图的人，Roman Cortes画的CSS Homer是最好的CSS ASCII 艺术例子之一。
用文本和CSS画图的好处是可扩展的。如果你在你的浏览器改变字的大小，alien也随着变大变小。因为文字是矢量图形——这意味着CSS ASCII艺术是矢量艺术的一种格式。这也意味着不管你画多大，文件的大小一直都是不变的。如果你需要放一个大的Reddit alien在你的网站，图片的话大于8kb。你将更会（从文件大小方面考虑）选择用CSS版本。
那它是怎么做的呢？
实际很简单。这个alien是没有应用任何CSS——剥离掉后的裸奔链接
The HTML
<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
CSS也非常简单。每个字符都是绝对定位的，单位是用em。这样允许我们更容易通过改变font-size这个参数从而达到改变alien的大小。
#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;}
鼠标划过试看看~~~
