Die Boxen wurden bereits mit runden Ecken, Schatten und Farbverläufen versehen. Jetzt ist der Text an der Reihe. In diesem Artikel wird also per CSS in der Version 3 die Textgestaltung vorgenommen…

Schatten für den Artikeltext:

Ein Text-Schatten wird mit folgendem Stylesheet realisiert…:

• text-shadow: 5px 3px 0px #FF0000;

Die einzelnen Werte können natürlich an die persönlichen Wünsche und Vorstellungen angepasst werden. Dieses Beispiel erzeugt einen roten Schatten…

Overflow per CSS:

Einem HTML Element (etwa p) wird eine Klasse zugewiesen und diese wird dann gestaltet.

<p class=”test1″>This is some long text that will not fit in the box</p>

In der CSS-Datei kann jetzt der Overflow so gestaltet werden:

p.test1 {

white-space: nowrap;

width: 300px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}

Die zweite Variante von text-overflow neben “clip” ist “ellipsis”.

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

Spaltensatz per CSS:

Spaltensatz mit CSS3 geht auch. Der Spaltenumbruch kann aber nicht selber festgelegt werden. Das Resultat auf der Webseite ist also mehr Zufall.

Die Spaltenfunktion braucht übrigens noch die Browser-Präfixe:

p.spalte {

column-count: 3;

column-gap: 40px;

column-rule: 3px outset red;

-moz-column-count: 3;

-moz-column-gap: 40px;

-moz-column-gap: 40px;

-moz-column-rule: 3px outset red;

}

Es braucht hier also die -moz-Präfixe. Für andere Webbrowser braucht es dann natürlich die entsprechenden anderen Präfixe. Für Chrome und Safari sind das die webkit-Präfixe…