Weitere Möglichkeiten

1. Kreative Textgestaltung mit CSS3
2. Farbverläufe und Masken
3. Weitere Möglichkeiten

Möglichkeit 2: Effektkompositionen, Verläufe und RGBaDank der Unterstützung für den RGBa-Farbraum in CSS3 steht Ihnen zusätzlich zum RGB-Farbumfang auch noch ein Alphakanal zur Verfügung, mit dessen Hilfe nun auch die Transparenzeigenschaften von Text beeinflusst werden können. Um die Vielfalt dieser Effekte zu erhöhen, können Sie einen Textabschnitt mit einem Duplikat des Textes überlagern, um dadurch eine Komposition von CSS-Effekten zu erstellen.Durch einen geschickten Einsatz von Transparenzen können Sie komplexe visuelle Effekte mit reinem Text ins Leben rufen, die sich sonst nur in einem Bild einfangen ließen. Mithilfe der Eigenschaft content: können Sie zusätzlichen Text an ein Seitenelement anhängen und diesen als ein Pseudoelement stilisieren. Im Falle einer h1-Überschrift beginnen Sie mit diesem HTML-Code:

<h1 data-title="Internet Magazin"><a
href="#">Internet Magazin </a></h1>

und fügen anschließend Ihrem CSS-Stylesheet diese Regel hinzu:

h1:after {
color: #3E42DD;
content: attr(data-title);
}

Dadurch liest der Browser den Inhalt des Attributes data-title der h1-Überschrift aus und hängt diesen Inhalt als ein neues Element an die h1-Überschrift an.Damit dieses neu eingefügte Element das ihm vorangehende <a>-Element genau überlagert, müssen Sie noch die Positionierung korrekt festlegen. Hierzu gilt für den Text der h1- Verknüpfung:

h1 a { position: absolute; }

und für das übergeordnete Element:

h1 { position: relative; }

Da sich jetzt diese beiden Elemente genau überlagern, haben Sie quasi eine virtuelle Ebene zur Verfügung. Der Einsatz von content:attr() schließt sich allerdings mit Transformationen aus, denn ein Pseudoelement kann nicht transformiert werden, weil es eigentlich gar nicht existiert.In Webkit-Browsern haben Sie die Möglichkeit, anstatt einer einheitlichen Textfarbe einen transparenten Verlauf zu nutzen. Zum Beispiel so:

-webkit-mask-image: -webkitgradient(
linear, left top, left
bottom, from(rgba(0,0,0,1)),
color-stop(60%, rgba(0,0,0,0.1)),
to(rgba(0,0,0,0.8)));

Dadurch erlauben Sie anderen Seitenelementen, durch den Text zum Teil durchzuscheinen. So können Sie mithilfe von Transparenzen, Farbverläufen und Schlagschatten sehr interessante Effektkompositionen ins Leben rufen.Möglichkeit 3: Text in SpaltenMit CSS3 können Sie Text erstmals mehrspaltig fließen lassen, ohne auf semantisches Markup verzichten zu müssen. Zur Auszeichnung von Seitenelementen stehen Ihnen in HTML5 neue Tags zur Verfügung, darunter <article>, <hgroup> und <section>. Diese zusätzliche intelligente Unterscheidung von Inhaltstypen vereinfacht den Einsatz neuer CSS3-Selektoren. In der einfachsten Ausführung könnten Sie Ihren Inhalt wie folgt kennzeichnen.

<article><hgroup><h1 data-title="Titel"><a href="#">Titel</a></h1><h2 data-title="Untertitel"><a href="#">Untertitel</a></h2></hgroup><p>Der Vorspann fliesst einspaltig.</p><section class="artikel"><p>Dieser Textabschnitt besteht aus mehreren Absaetzen.</p><p>Dieser ganze Abschnitt fliesst zweispaltig.</p></section></article>

Die Anzahl der Spalten in CSS3 wird mittels der Eigenschaft column-count festgelegt. Den Steg bestimmt die CSS3-Eigenschaft column-gap. Ergänzt um herstellerspezifische Eigenschaften, welche für die Kompatibilität mit älteren Versionen von Mozilla- und Webkit-Browsern benötigt werden, sieht nun der benötigte Regelsatz für zweispaltigen Textfluss etwa wie folgt aus:

section.artikel {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
}

Bei der Gestaltung von Textfluss und Textumbruch können Sie sich außerdem die in CSS3 neu eingeführten Selektoren zunutze machen. Wenn Sie etwa den Vorspann einspaltig und den übrigen Text mehrspaltig fließen lassen möchten, können Sie den ersten Absatz etwa unter Verwendung der :first-child-Pseudoklasse erstellen. Alternativ nutzen Sie den sogenannten Kombinator angrenzender Geschwisterelemente. Falls der Artikel mit einer hgroup-Überschriftengruppe beginnt, auf die ein <section>-Element folgt, können Sie den einspaltigen Vorspann wie folgt definieren:

hgroup + section {
font-size: 1.25em;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}

Nach demselben Prinzip können Sie auch etwa die erste Zeile in dem ersten Absatz gesondert hervorheben, zum Beispiel:

hgroup + p:first-line {
font-weight: bold;
}

So lässt sich ein Magazinlayout ganz leicht umsetzen.