HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 144

teilt, gibt es statt der grid -Klasse die Klassen column2 und column3 , je nachdem, ob der
Inhalt auf zwei Spalten oder drei Spalten aufgeteilt werden soll. Moment mal, nicht
mehr? Möglich wären zwar auch noch mehr Spalten, allerdings passen dann auf dem
iPad im Hochformat kaum noch zwei Worte nebeneinander. Bedenken Sie, das Tablet
ist nur etwa halb so groß wie ein handelsübliches Printmagazin.
Innerhalb einer mehrspaltigen Sektion können beliebige Elemente verwendet wer-
den, Bilder und Zwischenüberschriften sind kein Problem. Die gängigsten Elemente
zur Textauszeichnung haben im MagazineGrid bereits einen vordefinierten Stil, wel-
cher auf gute Lesbarkeit ausgerichtet ist. Besonders wichtig dabei ist das durchgän-
gige Grundlinienraster von 22 Pixel, das dafür sorgt, dass auch mehrspaltige Texte
immer auf der gleichen Linie liegen.
Legen Sie einen Artikel mit Überschrift und Absätzen und Zwischenüberschriften an:
<article>
<section class="gutter">
<h1>Die Lebensader der Pharaonen</h1>
<p class="intro">…</p>
</section>
<section class="gutter column2 border">
<h2>…</h2>
<p>…</p>
…
</section>
</article>
Selbst ohne weiteres CSS sieht das schon nach einer ganz ordentlichen Magazinseite
aus (Abbildung 4.9)! Um Ihrem Layout noch das gewisse Etwas zu verleihen, geben
Sie den Überschriften ein knalliges Orange und wählen eine Headline-Schrift, die den
Charakter Ihres Reisemagazins unterstützt:
h1, h2, h3 {
font-family: 'FranchiseRegular';
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0;
}
h1 {
font-size: 130px;
line-height: 110px;
margin-left: -4px;
color: #444;
text-shadow: 0 1px 0 #000, 0 3px 4px #666;
}