Weblog
CSS-Fonts
Nach einer kleinen Pause in meinem Blog nun wieder ein Beitrag, diesmal zum Thema CSS (Cascading Style Sheets).
Es ist mittlerweile nicht nur zum Trend geworden seine Seiten mit CSS zu bauen und zu gestalten, sondern viel mehr ein Thema in Puncto Barrierefreiheit. (barrierefrei-infos.de)
Lassen wir dieses Thema aber mal beiseite und konzentrieren uns auf die Möglichkeiten, die uns CSS doch bietet.
So zum Beispiel ist es möglich, Fonts mit CSS zu erstellen!
Code:
<style type="text/css">
.outer {display:block; width:5px; height:10px; float:left; margin:1px; background:transparent;}
*html .outer {height:12px; h\eight: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;}
</style>
</head>
<body>
<div class="outer" title="0"><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="1"><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="2"><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="3"><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="4"><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="5"><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="6"><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="7"><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="8"><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="9"><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="A"><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="B"><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="C"><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="D"><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="E"><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="F"><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="G"><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="H"><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="I"><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="J"><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="K"><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="L"><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="M"><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="N"><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="O"><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="P"><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="Q"><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="R"><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="S"><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="T"><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="U"><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="V"><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="W"><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="X"><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="Y"><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="Z"><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>
.outer {display:block; width:5px; height:10px; float:left; margin:1px; background:transparent;}
*html .outer {height:12px; h\eight: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;}
</style>
</head>
<body>
<div class="outer" title="0"><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="1"><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="2"><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="3"><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="4"><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="5"><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="6"><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="7"><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="8"><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="9"><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="A"><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="B"><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="C"><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="D"><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="E"><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="F"><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="G"><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="H"><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="I"><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="J"><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="K"><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="L"><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="M"><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="N"><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="O"><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="P"><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="Q"><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="R"><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="S"><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="T"><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="U"><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="V"><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="W"><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="X"><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="Y"><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="Z"><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>
Das Ergebnis kann man sich hier anschauen.
Zugegeben, der Code ist nicht gerade das, was man als "schlank & optimiert" bezeichnen kann.
Hier liegt das Ziel aber darin aufzuzeigen was alles mit den CSS Standards möglich ist.
Getestet wurde das Ganze fehlerfrei unter WinXP mit dem IE5.01, IE5.5, IE6, Mozilla/Firefox, NN7 und Opera.
Die Idee, eigene Fonts mit CSS zu erstellen kommt von Stu Nicholls
Um einen Trackback von Ihrem eigenen Blog zu hinterlassen, bitte diesen Link benutzen: trackback
<- Zurück zu: Weblog
Keine Einträge im Gästebuch gefunden. 
