Animation von Pseudoklassen und CSS
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Mit CSS können Sie auch interessantere Dinge wie den »Schwebe«-Effekt für Texte erzielen. Dafür benötigen Sie eine Stilregel, die die Darstellung des Textes verändert, wenn der Benutzer die Maus darüber führt. Es entsteht der Eindruck, als sei der Text eine kleine Animation.
Dieser Effekt funktioniert nur bei verlinktem Text im Internet Explorer 6, allerdings können Sie in anderen Browsern (wie Firefox und Internet Explorer 7 (zur Drucklegung ist der Internet Explorer 7 noch in der Beta-Version, daher geben wir hier keine Garantie für die endgültige Funktionalität) auch andere Elemente »schweben« lassen. Sie benutzen dafür die Pseudoklasse a:hover und legen fest, welche Veränderung beim verlinkten Text eintreten soll, wenn die Maus darüber geführt wird.
a:hover {
background-color: blue;
color: white;
font-size: 22px;
}Die folgende Abbildung zeigt, was passiert, wenn der Benutzer den Mauszeiger über einen Link bewegt, dem diese Stilregel zugewiesen ist. Man kann auf dem Screenshot zwar nicht sehen, dass sich die Schriftfarbe verändert. Es ist jedoch klar erkennbar, dass der verlinkte Text deutlich größer ist als der restliche Text.
Abbildung: Pseudo-Animation bei einem Link mit »Schwebe«-Effekt.
Dieser Effekt erinnert an einen grafisch animierten Menü-Button, der auf eine Mausberührung reagiert. Alle Details zu dieser Technik finden Sie unter Texteffekte und Kaskadierung.
Schriftgrößen verändern in :hover-Regeln
Obwohl wir Ihnen davon abraten, Layouts mit Tabellen zu erstellen, ist es vollkommen in Ordnung, Tabellen zu verwenden. Zur Darstellung von tabellarischen Daten, beispielsweise in einem Arbeitsblatt, sind sie das empfohlene Mittel. Der Turnierplan, den die Abbildung Mit der formatierten Tabelle ist das Layout fertig zeigt, enthält tabellarische Daten und deshalb sind auch Tabellen am besten geeignet, ihn zu kodieren.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" 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.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg