Die CSS-Bausteinschrift »Curtis«
Curtis ist eine geometrische Sansserif von David DeSandro, die er aus seinen FontSruct-Schriften Curtis Heavy and Curtis Pixel 14 hergeleitet hat. Die Form der Curtis-Lettern ist über Cascading Style Sheets (CSS) definiert. Die Buchstaben werden vom Browser berechnet und ergeben sich aus einer Kombination von Hintergrundfarbe, Rahmenweite, Rahmenradius und dem ausgeklügelten Zusammenspiel von absoluten und relativen Positionen. Um eine Idee der Buchstabenkonstruktion zu bekommen, hat DeSandro auf seiner Curtis-Seite den Inspect-Button eingefügt, mit dem sich die Buchstaben röntgen lassen.
Der Buchstabe R zum Beispiel definiert sich wie folgt:
<span class="css_char r">
R
<span class="inside split_vert"></span>
<span class="outside split_vert"></span>
<span class="stroke"></span>
<span class="fill"></span>
</span>Der Curtis-CSS-Font ist ein Experiment und wurde für keinen speziellen Zweck entwickelt. Das Design-Muster veröffentlicht DeSandro unter einer Creative Commons Attribution Lizenz, so dass jeder das Design benutzen und weiter entwickeln kann.
7 Kommentare
Kommentarfunktion ist deaktiviert.
<em>kursiv</em> <strong>fett</strong> <blockquote>Zitat</blockquote>
<a href="http://www…">Link</a> <img src="http://bildadresse.jpg">
TW
schön!
Alexander
Unfug!
Konstruktionsbedingt sind einige Buchstaben ausgesprochen unansehnlich (z.B. S).
Aber viel schlimmer: In der Praxis völlig unbrauchbar, der Code wird aufgebläht und eine Trennung von Inhalt und Erscheinung wird nicht mehr gegeben; der Inhalt ist schlicht nicht lesbar, wenn das Layout wegfällt.
thomas junold
ich findes es wunderbar. es zeigt einfach, dass css auch für solche zwecke benutzbar ist.
es gibt hier keinen inhalt alexander. das ist eine spielerei, ein ausprobieren von möglichkeiten. ;)
Florian
Lustig das ihr das erst jetzt entdeckt, weil ist ja schon recht alt.
Im übrigen hat eer auch das Opera Logo mit CSS nachgebaut. Beeindruckend!
BAR M Grafikdesign
Uuuuuah! Die olle Seite des #Bauhaus-#Designs. We love #Futura.
Balthier9999
Cooles Experiment! Wüsste zwar keinen praktischen Nutzen, aber dennoch schön! :D
Balthier9999
edit: Ich finde die Logos unten im Footer auf Curtis’ Seite sehr interessant (die Mouseover-Spielereien)… http://desandro.com/resources/curtis-css-typeface/
Schicke Pseudo-3d-Effekte^^