Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Durch die Kombination zweier unterschiedlicher Elemente wie Serifenschriften und serifenloser Schriften (siehe folgende Abbildung) sollen Kontraste auf einer Webseite erzeugt werden.
Abbildung: Zwei unterschiedliche Schrifttypen in der gleichen Überschrift.
Lösung
Verwenden Sie zwei unterschiedliche Schriften in der gleichen Überschrift. Versehen Sie zuerst die Überschrift mit dem nötigen Markup-Code:
Im zweiten Schritt erstellen Sie die CSS-Regeln, mit denen die unterschiedlichen Schriften in den beiden span-Elementen festgelegt werden:
body {
margin: 25% 10% 0 10%;
}
h2 {
font-size: 2em;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
padding: 0;
margin: 0;
}
h2 span {
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 1.1em;
font-weight: normal;
}
h4 {
margin: 0;
padding: 0;
font-size: 1.25em;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
}
h4 span {
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 1.1em;
font-weight: normal;
}Diskussion
Durch die Kombination scheinbar unzusammenhängender Elemente können Kontraste erzeugt werden. In unserem Beispiel wurde zu diesem Zweck das unterschiedliche Aussehen von serifenlosen Schriften und Serifenschriften benutzt. Kontraste lassen sich aber auch grafisch erreichen, beispielsweise durch die Kombination von Symbolen zweier verschiedener politischer Parteien. Oder Sie verwenden den Kontrast eher symbolisch, beispielsweise indem Sie zwei unterschiedliche Partys zeigen: einmal eine große Zusammenkunft in einem Club und einmal ein Mädchen, das die Kerzen auf seiner Geburtstagstorte auspustet.
Siehe auch
Das Rezept Verschiedene Bildformate miteinander kombinieren.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln