Es ist schon erstaunlich, welche Kunststücke und Zaubertricks man mit CSS völlführen kann. Einige der besten Beispiele haben wir herausgesucht. Praxistauglich ist das zwar oft nicht, doch Staunen ist garantiert.
Ob es die „CSS-Border-Art“ jemals zur anerkannten Kunstform bringen wird, darf bezweifelt werden. Immer wieder neue Beispiele machen uns jedoch noch immer Staunen. Was man mit Rahmen so alles anstellen kann…zum Beispiel eine Digitaluhr. Nein, eine Grafik ist es wirklich nicht.
Ein anspruchsvolles CSS Experiment kommt von Daniel Rubin. Eine horizontale Navigation der Extraklasse. Wie immer gilt in solchen Fällen: Die Sache ist (noch) nicht für den praktischen Einsatz geeignet.
Das experimentelle Menü von Seamus P. H. Leahy tut seinen Dienst in allen modernen Browsern, mit Ausnahme des Internet Explorers. Eine Fülle von Tricks kommt zum Einsatz.
Vom gleichen Autor stammt dieser verblüffende Zaubertrick. Eine Tabelle wird mit Hilfe einer externen CSS-Datei komplett umformatiert.
Der Trick mit dem Logo – Rene Grasegger kennt ihn, das Logo enthüllt sich erst nachdem gescrollt wird. Ein schicker, verblüffender Effekt, mit dem man gewiss einiges anstellen kann. Alles pures CSS, man kommt ganz ohne Scripting aus. Eine Grafik wird mittels CSS im Hintergrund fixiert, sie bleibt als Wasserzeichen unverrückbar. Die zweite Grafik wird ebenfalls mit CSS positioniert, allerdings ohne Fixierung. Technisch sieht das im Prinzip so aus:
{background : url(logo1.gif) fixed no-repeat; }
{background : url(logo2.gif) no-repeat; }
Hinter der Bezeichnung „Accessible Image-Tab Rollovers“ findet sich ein richtungweisendes CSS-Experiment von Dan Cederholm. Eine Reiter-Navigation, die ohne den Einsatz von Grafiken gleich 3 Zustände simulieren kann.
Noch ein Trick von Dan Cederholm: CSS wechselt zwischen unterschiedlichen Bildgrößen hin und her, sobald nur die Maus darüber liegt. Gut gemacht, wären da nicht die alten Browser, die mit all dem nichts anzufangen wissen. Aber solche Probleme lassen sich lösen.
Einfach einen Link hinzufügen und diesen für moderne Browser verbergen. Dan empfiehlt text-indent: -1000em, ein riesiger Einzug also, der den Linktext unlesbar macht, nur eben für alte Browser nicht. Ein Trick, der sicherlich auch an anderer Stelle gute Dienste leisten kann.
Tolle Idee auf die man schon früher hätte kommen können. Individuelle Unterstreichungen sind möglich mit Hilfe von Grafiken und natürlich CSS. Stuart Robertson führt uns bei ALA die Technik vor und zeigt Beispiele. Nun klappt es quasi handschriftlich zu unterstreichen oder mit Sternchen oder Pfeilen – sogar animiert.
Ebenfalls verblüffend ist diese Technik, Bild und Text zu kombinieren. Der Text kann auf verschiedene Weise an feststehenden Abbildungen vorbeigescrollt werden. Starke Sache, aber leider nichts für den Internet Explorer. Der zeigt das Beispiel zwar auch an, lässt aber die Teile vermissen, auf die es ankommt.
Levin Alexander zeigt uns, wie man Bild und Text so miteinander kombiniert, dass zum Beispiel eine Überschrift auch dann noch gelesen werden kann, wenn die Grafik vom Browser gar nicht dargestellt wird. Tricksreiches CSS macht es möglich.
