Typografaces

dabblet.css

/***
    Typografaces
    Some faces done in pure CSS and typography.
***/

.toolbox { padding: 0.5em 1em; margin: 0 0 1em 0; border: 1px solid #ddd; border-radius: 8px; background: #000; font-size: medium; }
.toolbox a { display: inline-block; margin: 0 8px; color: white; text-decoration: none; }

/***
    Typografaces
***/
.typograface { position: relative; z-index: 1; width: 12em; height: 15em; overflow: hidden; float: left; margin: 0 4px 4px 0; border: 1px solid #ddd; border-radius: 8px; background: #eee; }


/***
    Typograface #1
***/
#typograface_1 { color: #e5c298; font-family: arial; font-size: 100%; }
#typograface_1 span { display: block; position: absolute; line-height: 1em; vertical-align: top; text-transform: uppercase; }
#typograface_1 .face { top: 0; left: 0; font-size: 16em; z-index: 1; }
#typograface_1 .hair { top: 0.5em; left: -0.08em; color: #c99463; font-size: 2.85em; text-align: center; letter-spacing: -0.13em; z-index: 90; }
#typograface_1 .eye { top: 2.5em; color: #556f8d; font-size: 2em; }
#typograface_1 .eye.left { left: 1.75em; z-index: 25; }
#typograface_1 .eye.right { left: 3.25em; z-index: 25; }
#typograface_1 .nose { top: 2.2em; left: 1.66em; z-index: 50; font-size: 2.8em; }
#typograface_1 .mouth { top: 2.1em; left: 1.16em; color: #c47477; z-index: 25; font-size: 4em; }
​

dabblet.html

<div class="typograface" id="typograface_1">
    <span class="face">u</span>
    <span class="hair">wwwww</span>
    <span class="eye left">d</span>
    <span class="eye right">d</span>
    <span class="nose">c</span>
    <span class="mouth">&ndash;</span>
</div>

<!--
<div class="typograface" id="typograface_2">
    <span class="face">u</span>
    <span class="hair">wwwww</span>
    <span class="eye left">d</span>
    <span class="eye right">d</span>
    <span class="nose">c</span>
    <span class="mouth">&ndash;</span>
</div>
-->​

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}