Web Texte mit dem CSS Wrapper in die gewünschte Form zwingen
Die Seite the Idea Shower ist unter Webdesignern immer wieder eine Bereicherung. Als neueste Idee hat sich Idea Shower den CSS Text Wrapper ausgedacht und präsentiert diese neueste Errungenschaft mit einem echt schönen Online Tool.
Der CSS Text Wrapper bringt nach Ermessen des Designers jeden Fließtext in die gewünschte Form. Egal ob es ein Weinglas, eine Giraffe oder nur ein simples Dreieck ist. Ich habe mich schon lange nach einem solchen Tool umgesehen, da ich schon das Eine oder Andere mal Texte in eine gewisse Form zwingen wollte.
Wie funktioniert der CSS Text Wrapper
Der Wrapper arbeitet mit einer Float Umgebung und lässt den Fließtext um die einzelnen DIVs herumfließen. Die Anzahl der einzelnen DIVs ist natürlich von der Komplexität der Form abhängig. Schwierigkeiten bei der Anbindung sehe ich derzeit bei Content Management Systemen, die den TinyMCE als HTML Editor verwenden. Der TinyMCE kommt in der aktuellen Version des CSS Text Wrappers gar nicht zurecht. Andere HTML Editoren konnte ich bis heute noch nicht testen und kann daher keine Aussage darüber treffen, wie diese mit dem CSS Text Wrapper klar kommen.
Bildliche Darstellung der Vorhergehensweise des Wrappers:
Den CSS Text Wrapper auf einer Seite einbinden
Es gibt verschiedene Varianten mit dem Wrapper zusammen zu arbeiten.
Das Online Tool auf der Website des Wrappers bietet bereits
verschiedene Möglichkeiten an, wie man Texte in Form bringen kann. Die
folgenden Methoden beruhen alle auf dem Online Tool.
Methode 1 (nur CSS/XHTML):
Für Seiten die kein Content Management System oder einen Blog mit WYSIWYG Editor benutzen bzw. den CSS Wrapper nur einmal nutzen möchten, ist es ratsam die gewünschte Form zu erstellen und den kompletten Quelltext aus der CSS/XHTML Box unterhalb des Online Tools zu kopieren.
Methode 2 (CSS Klasse und XHTML):
Es ist möglich die CSS Klassen für den CSS Test Wrapper in sein Stylesheet einzufügen und somit öfter auf die Funktionen zurückzugreifen, ohne jedesmal den kompletten XHTML Code in seine Seite einzubinden. So kann man bei Bedarf immer wieder auf die Klassen zurückgreifen. HINWEIS: Für jede neue Form, muss mit dem Online Tool ein neuer Code ausgegeben werden. Die Klassen bleiben jedoch gleich.
Methode 3 (Javascript):
Von der dritten Methode den Text per Javascript in seine Seite einzubinden möchte ich abraten, das es kein No-Script Attribut gibt und somit bei Usern, die kein Javascript aktiviert haben, nicht angezeigt wird. Wer allerdings darauf keine Rücksicht nehmen möchte, kann selbstverständlich die Methode mit Javascript nutzen.
Ich habe ein wenig mit dem CSS Wrapper experimentiert und folgende Formen für einen Text erstellt.
 |
Text als Kreis |
 |
Text als Diamant |
 |
Text als Konkave |