CSS font
Jedná se o příklad, který ukazuje font generovaný pouze pomocí CSS. Jeho možnosti reálného nasazení jsou sice omezené, ale dobře ukazuje možnosti CSS. Využití je možné například k ochraně e-mailové schránky před roboty vyhledávající adresy pro spam.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Stu Nicholls. Popis najdete v článku CSS Font.
CSS
.outer {display:block; width:5px; height:10px; float:left; margin:1px; background:transparent;}
* html .outer {height:12px; he\ight:10px;}
.outer div {display:block; overflow:hidden; height:2px;}
* html .outer div {float:left;}
.la, .lz {width:5px;}
.lb, .lc, .ld, .lg, .ll, .ln, .lq, .lt {width:1px;}
.lh, .lm, .lo, .ls {width:2px;}
.li, .lk, .lr, .lp, lj {width:3px;}
.le, .lf {width:4px;}
.la, .lr, .lt {background:#000;}
.lz {background:transparent;}
.lh {margin-right:1px;}
.ld, .lf, .lh, .lk, .li, .lm, .lo, .lp, .lq {border-right:1px solid #000;}
.ld, .le, .li, .lm, .ls {border-left:1px solid #000;}
.lc {border-right:4px solid #000; background:#ccc;}
.lb {border-left:4px solid #000; background:#ccc;}
.lg, .ln, .ls {border-right:2px solid #000;}
.lj {border-right:1px solid #ccc; border-left:1px solid #ccc; background:#000;}
.ll, .ln, .lo {border-left:2px solid #000;}
* html .lb, * html .lc {width:5px; w\idth:1px;}
* html .ld, * html .lg, * html .ll {width:3px; w\idth:1px;}
* html .le, * html .lf {width:5px; w\idth:4px;}
* html .lh {width:3px; w\idth:2px;}
* html .li {width:5px; w\idth:3px;}
* html .lj {width:5px; w\idth:3px;}
* html .lk, * html .lp {width:4px; w\idth:3px;}
* html .lm {width:4px; w\idth:2px;}
* html .lo, * html .ls {width:5px; w\idth:2px;}
* html .lq {width:2px; w\idth:1px;}
* html .ln {width:5px; w\idth:1px;}
.clr {clear:left; height:1em;}
XHTML
<html>
<body>
<div class=“outer“ title=“zero“><div class=“lc“></div><div class=“ls“></div><div class=“li“><div class=“lq“></div></div><div class=“lo“></div><div class=“lb“></div></div>
<div class=“outer“ title=“one“><div class=“lg“></div><div class=“lh“></div><div class=“lh“></div><div class=“lh“></div><div class=“lj“></div></div>
<div class=“outer“ title=“two“><div class=“lb“></div><div class=“lf“></div><div class=“lj“></div><div class=“le“></div><div class=“la“></div></div>
<div class=“outer“ title=“three“><div class=“lb“></div><div class=“lf“></div><div class=“lb“></div><div class=“lf“></div><div class=“lb“></div></div>
<div class=“outer“ title=“four“><div class=“ld“></div><div class=“ld“></div><div class=“la“></div><div class=“lh“></div><div class=“lh“></div></div>
<div class=“outer“ title=“five“><div class=“la“></div><div class=“le“></div><div class=“lb“></div><div class=“lf“></div><div class=“lb“></div></div>
<div class=“outer“ title=“six“><div class=“lj“></div><div class=“le“></div><div class=“lb“></div><div class=“li“></div><div class=“lj“></div></div>
<div class=“outer“ title=“seven“><div class=“la“></div><div class=“lk“></div><div class=“lh“></div><div class=“lh“></div><div class=“lh“></div></div>
<div class=“outer“ title=“eight“><div class=“lj“></div><div class=“li“></div><div class=“lj“></div><div class=“li“></div><div class=“lj“></div></div>
<div class=“outer“ title=“nine“><div class=“lj“></div><div class=“li“></div><div class=“lc“></div><div class=“lf“></div><div class=“lj“></div></div>
<div class=“clr“></div>
<div class=“outer“ title=“alpha“><div class=“lj“></div><div class=“li“></div><div class=“la“></div><div class=“li“></div><div class=“li“></div></div>
<div class=“outer“ title=“beta“><div class=“lb“></div><div class=“li“></div><div class=“lb“></div><div class=“li“></div><div class=“lb“></div></div>
<div class=“outer“ title=“charlie“><div class=“lj“></div><div class=“li“></div><div class=“le“></div><div class=“li“></div><div class=“lj“></div></div>
<div class=“outer“ title=“delta“><div class=“lb“></div><div class=“li“></div><div class=“li“></div><div class=“li“></div><div class=“lb“></div></div>
<div class=“outer“ title=“echo“><div class=“la“></div><div class=“le“></div><div class=“lb“></div><div class=“le“></div><div class=“la“></div></div>
<div class=“outer“ title=“foxtrot“><div class=“la“></div><div class=“le“></div><div class=“lb“></div><div class=“le“></div><div class=“le“></div></div>
<div class=“outer“ title=“golf“><div class=“lc“></div><div class=“le“></div><div class=“li“></div><div class=“li“></div><div class=“lc“></div></div>
<div class=“outer“ title=“hotel“><div class=“li“></div><div class=“li“></div><div class=“la“></div><div class=“li“></div><div class=“li“></div></div>
<div class=“outer“ title=“india“><div class=“lj“></div><div class=“lh“></div><div class=“lh“></div><div class=“lh“></div><div class=“lj“></div></div>
<div class=“outer“ title=“juliet“><div class=“lj“></div><div class=“lh“></div><div class=“lh“></div><div class=“lh“></div><div class=“ll“></div></div>
<div class=“outer“ title=“kilo“><div class=“li“></div><div class=“lm“></div><div class=“lr“></div><div class=“lm“></div><div class=“li“></div></div>
<div class=“outer“ title=“lema“><div class=“le“></div><div class=“le“></div><div class=“le“></div><div class=“le“></div><div class=“la“></div></div>
<div class=“outer“ title=“mike“><div class=“li“></div><div class=“ln“></div><div class=“li“><div class=“lq“></div></div><div class=“li“></div><div class=“li“></div></div>
<div class=“outer“ title=“november“><div class=“li“></div><div class=“lo“></div><div class=“li“><div class=“lq“></div></div><div class=“ls“></div><div class=“li“></div></div>
<div class=“outer“ title=“oscar“><div class=“lj“></div><div class=“li“></div><div class=“li“></div><div class=“li“></div><div class=“lj“></div></div>
<div class=“outer“ title=“papa“><div class=“lb“></div><div class=“li“></div><div class=“lb“></div><div class=“le“></div><div class=“le“></div></div>
<div class=“outer“ title=“quebec“><div class=“lj“></div><div class=“li“></div><div class=“li“><div class=“lq“></div></div><div class=“lm“></div><div class=“lc“></div></div>
<div class=“outer“ title=“romeo“><div class=“lb“></div><div class=“li“></div><div class=“lb“></div><div class=“li“></div><div class=“li“></div></div>
<div class=“outer“ title=“sierra“><div class=“lc“></div><div class=“le“></div><div class=“lj“></div><div class=“lf“></div><div class=“lb“></div></div>
<div class=“outer“ title=“tango“><div class=“la“></div><div class=“lh“></div><div class=“lh“></div><div class=“lh“></div><div class=“lh“></div></div>
<div class=“outer“ title=“uniform“><div class=“li“></div><div class=“li“></div><div class=“li“></div><div class=“li“></div><div class=“lj“></div></div>
<div class=“outer“ title=“victor“><div class=“li“></div><div class=“li“></div><div class=“li“></div><div class=“lj“></div><div class=“lh“></div></div>
<div class=“outer“ title=“whiskey“><div class=“li“></div><div class=“li“></div><div class=“li“><div class=“lq“></div></div><div class=“ln“></div><div class=“li“></div></div>
<div class=“outer“ title=“xray“><div class=“li“></div><div class=“li“></div><div class=“lj“></div><div class=“li“></div><div class=“li“></div></div>
<div class=“outer“ title=“yankee“><div class=“li“></div><div class=“li“></div><div class=“lj“></div><div class=“lh“></div><div class=“lh“></div></div>
<div class=“outer“ title=“zulu“><div class=“la“></div><div class=“lp“></div><div class=“lh“></div><div class=“lq“></div><div class=“la“></div></div>
<div class=“outer“ title=“at“><div class=“lj“></div><div class=“li“></div><div class=“ls“><div class=“lq“></div></div><div class=“li“><div class=“lq“></div></div><div class=“lj“></div></div>
<div class=“outer“ title=“dot“><div class=“lz“></div><div class=“lz“></div><div class=“lz“></div><div class=“lg“></div><div class=“lg“></div></div>
<div class=“clr“></div>
</body>
</html>
