HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 38

Farbdefinitionen und Transparenzen
Sie haben bereits im Beispiel box-shadow die Methode kennengelernt, Farben über
RGBA zu definieren. Die allgemeine Transparenz eines Elements legen Sie über die
Eigenschaft opacity fest. Die Transparenz wird dann auf das Element und seinen gan-
zen Inhalt angewendet. Sie möchten, dass das Hintergrundbild etwas durch die Kopf-
zeile hindurchscheint. Dazu weisen Sie dem Kopfbereich die Eigenschaft opacity zu:
header {
border-radius: 15px;
background-color:#1384ed;
text-align:center;
opacity:0.7;
}
Der header wird dadurch transparenter und etwas dunkler, da der dunkle Hinter-
grund mehr durchscheint (Abbildung 2.10).
Abbildung 2.10 Die Kopfzeile mit einer Transparenz von 0.7 oder auch 70 %
Mehrspaltigkeit
In gedruckten Magazinen ist es gang und gäbe, einen Fließtext über mehrere Spalten
zu verteilen. Mit HTML und CSS war dies in dieser Form nicht ohne weiteres möglich.
CSS3 führt nun mehrere Definitionen zur Mehrspaltigkeit von Fließtext ein. Damit
wird Text automatisch in die nächste Spalte umgebrochen. Die Eigenschaft column-
count beschreibt die Anzahl der Spalten innerhalb des Elements. Mit column-gap defi-
nieren Sie den Abstand zwischen den Spalten, während column-rule auf Wunsch eine
Trennlinie zwischen den Spalten einfügt. Die Trennlinie können Sie in Stärke und
Farbigkeit Ihren Wünschen anpassen. In der Sharky WebApp möchten Sie, dass der
Inhaltstext zwischen Kopf- und Fußzeile in zwei Spalten fließt. Um dies zu erreichen,