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…