CSS für Anfänger: Textmarker für Fliesstext

Abschnitte wie mit einem Textmarker markieren

CSS für Anfänger: Textmarker für Fliesstext

Ich möchte Ihnen heute in meiner Reihe „CSS für Anfänger“ zeigen, wie Sie einen (langen) Fliesstext durch Effekte, die wie Markierungen eines Textmarkers aussehen, optisch aufpeppen bzw. auflockern können.

Diese Texteffekte lassen sich sehr einfach mit HTML und ein wenig CSS realisieren. Sie müssen dazu nur in der HTML-Datei den gewünschten Textbereich mit dem <span>-Tag einschließen und in der CSS-Datei für den <span>-Tag einen Innenabstand (padding) festlegen und eine Hintergrundfarbe (background-color) angeben.

Das HTML-Element <span> ist ein neutrales Element, welches dem Dokument eigentlich nichts hinzufügt. Aber zusammen mit CSS, kann es dazu benutzt werden, um visuelle Besonderheiten an bestimmten Textstellen im Dokument einzufügen!

Fertiges Beispiel ansehen (Grafik anklicken!)

Texteffekte mit CSS - Textmarker

Demo Musterbeispiel | Download Beispieldateien

HTML-Quellcode:

<h2>CSS für Anfänger: Textmarker</h2>

<p>Effekte, die wie <span class="green">Markierungen eines Textmarkers</span>
aussehen, lassen sich sehr einfach realisieren.</p>
<p>Den gewünschten Bereich <span class="olive">mit
dem span-Tag einschließen</span> und in der CSS-Datei
eine Hintergrundfarbe, eine Textfarbe und den Innenabstand
(padding) angeben.</p>

<h3>Weitere Beispiele:</h3>

<p>
Etiam cursus lacus in eros. <span class="blue">Praesent congue lacinia nunc</span>.
Cras placerat, risus in ullamcorper commodo; augue mauris
rhoncus ante, at vulputate urna sapien nec tortor.</p>

<p>
Pellentesque erat ipsum, volutpat sed, varius accumsan, convallis at, quam.
<span class="maroon">Sed quis est non dolor tempus volutpat</span>. Curabitur convallis.
Ut id lectus. Donec lacus. Etiam porttitor. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Quisque at leo. <span class="purple">Donec ac urna. Etiam commodo.</span>
Cras suscipit justo quis neque.In id sem. Mauris vitae lectus ut massa dignissim commodo.
Vivamus aliquam, turpis ac scelerisque convallis,
nisl velit dictum ligula, ac congue nunc diam ac nunc.
Donec purus diam, pulvinar sit amet, scelerisque vitae, vehicula ac, odio.
</p>

CSS-Formatierung (span-Element)

Das Inline-Element <span> erhält zuerst eine Schriftfarbe (color) und dann den entsprechenden Innenabstand (padding). Anschließend können Sie für jede beliebige Hintergrundfarbe (background-color) eine eigene CSS-Klasse erstellen und diese mit Ihrer ausgewählten Hintergrundfarbe auszeichnen.

In meinem Musterbeispiel habe ich 5 verschiedene CSS-Klassen angeführt!

CSS-Auszeichnung:

/* ======================================
   Formatierung von span:

   Für jede Farbe im Span-Element
   gibt es eine eigene CSS-Klasse!
   ====================================== */

span {color:#efefef; padding:0 3px;}

span.green {background-color:green;}
span.olive  {background-color:olive;}
span.blue { background-color:blue;}
span.maroon {background-color:maroon;}
span.purple {background-color:purple;}

Mein Muster-Beispiel (Grafik anklicken!)

Texteffekte mit CSS - Textmarker

Demo | Download

Ausführliche Infos zu HTML und CSS:
[Links öffnen in neuem Fenster!]

Jendryschik.de
css4you.de
HTML.net – HTML Tutorial
HTML.net – CSS Tutorial

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *