Sidebar
ein-/ausblenden

Fließtexte mit CSS Text Wrapper

Plugin für WordPress SEO

Anzeige

CSS Text Wrapper

Das Darstellen von Formen im Text, bzw. die Darstellung fließender Bilder im Text ist immer wieder Thema im Bereich Webdesign. Gern möchte man diese Form auch nutzen und nicht nur den Printmedien überlassen.

Allerdings geht das derzeit nur mit einem aufwändigen Markup und viel CSS. Diese Lösung hat Schwachstellen und ob man sie nachahmen muss, dass sollte jeder selber entscheiden.

Damit man aber die Integration schnell und einfach bekommt, steht das Projekt CSS Text Wrapper zur Verfügung. Damit lassen sich alle erdenklichen Formen mit dem Text erstellen, einfach mit Hilfe der Mouse und einem Editor. Der Syntax wird einem als pure HTML/CSS-Markup übergeben oder mit Hilfe einer JavaScript-Lösung. Allerdings ist die JS-Lösung nicht so gestrickt, dass man mit deaktiviertem JavaScript den Inhalt trotzdem bekommt.

Die Demoseite zeigt eindrucksvolle Ergebnisse.

Artikel #578, 4. Januar 2008 · CSS, xHTML, JS, Webküche · 4 Kommentare · Kommentar schreiben
Tags: , ,
· Tweet this!
Kommentar-Feed zum Artikel · TrackBack URL · Shortlink

«
»

3 Kommentare und 1 Trackback zu „Fließtexte mit CSS Text Wrapper“

  1. 1
    Kommentar von Ute
    4. Januar 2008 um 11:58

    Die Beispiele sind klasse, um mal wieder zu zeigen, was alles möglich ist. Es ist meines Erachtens bestimmt nicht sinnvoll, wenn beispielsweise alle Artikel eines Blogs so dargestellt würden. Für mal einen besonderen Effekt, ist es jedoch sicherlich geeignet.

  2. 2
    Kommentar von Marco
    4. Januar 2008 um 12:07

    Tolle Effekte, das funktioniert auch bei allen Schriftgrößen gleich gut. Aber wozu braucht man solche Textformen wie Weinglas usw.?

  3. 3
    Kommentar von Paul
    4. Januar 2008 um 15:40

    Ich finde, dass diese Funktion sich auch super einsetzten lässt, um Werbung besser in Texte einzubauen.

    Mfg

  4. 4
    Trackback von tobias.bloggt
    11. Januar 2008 um 20:25

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.