freeQnet-Logo
freeQnet

CSS-TippTransitionsweiche Hover-Effekte ohne JavaScript

Ich hatte ja versprochen, nach und nach ein paar der HTML-, CSS- und JavaScript-Kniffe, die ich in meinem neuen Blogdesign eingesetzt habe, in kleine Tutorials zu packen, damit ihr auch was davon habt. Damit will ich heute mal beginnen! Wer mit einem relativ aktuellen Firefox, Chrome oder Opera zu mir surft, wird vermutlich schon gesehen haben, dass sich Links im Menü weich ausfahren, die Artikel Detail-Informationen nahtlos einblenden, wenn man mit der Maus drüber fährt und auch sonst sämtliche Hover-Effekte weiche Übergänge haben. Klar, denkt man im ersten Moment. Das ist sicher mit JavaScript gelöst!

Weit gefehlt! Diese Effekte sind komplett mit einem ganz simplen CSS-Befehl gelöst. Ohne viel Hexenwerk kann so jeder ein fließenderes Surferlebnis auf seine Website bringen. Nach dem Klick erfahrt ihr, wie’s geht!

Transitions – simple Animation mit CSS

Wer sich ein wenig mit CSS auskennt, weiß, dass man mit der Pseudo-Klasse hover Elemente, über die man mit der Maus fährt, besonders hervorheben kann. Der folgende Code-Schnipsel zeigt zwei Beispiele aus meinem Blog:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
  text-decoration: none;
  font-weight: bold;
  color: #4D8299;
}
 
a:hover {
  color: #5A98B3;
}
 
article .meta-info {
  filter: alpha(opacity=0);
  opacity: 0;
}
 
article:hover .meta-info {
  filter: alpha(opacity=1);
  opacity: 1;
}

Im ersten Part des Codes wird für Links eine Farbe und Fettschrift festgelegt sowie die Unterstreichung, die ein Browser standardmäßig darunter setzen würde, entfernt. Fährt man mit der Maus darüber, soll sich die Farbe verändern. Der zweite Part des Beispiels setzt die Meta-Informationen eines Artikels standardmäßig auf unsichtbar. Beim Hover auf den Artikel selbst, sollen sie aber sichtbar sein.[1]

Verwendet man diesen Code so auf seiner Website, funktioniert das auch schon ganz gut, allerdings wird der Übergang der Link-Farbe und die Sichtbarkeit der Meta-Infos nicht animiert, sondern hart zwischen den beiden Möglichkeiten umgeschaltet. Hier kommt der CSS3-Befehl transition ins Spiel. Mit diesem kann man festlegen, dass Veränderungen an allen oder bestimmten Stil-Angaben wie Farbe, Breite, Rand etc. eines Elements weich übergeblendet werden sollen. Statten wir einfach mal den obigen Code mit diesem Befehl aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
a {
  text-decoration: none;
  font-weight: bold;
  color: #4D8299;
 
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
 
a:hover {
  color: #5A98B3;
}
 
article .meta-info {
  filter: alpha(opacity=0);
  opacity: 0;
 
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
 
article:hover .meta-info {
  filter: alpha(opacity=1);
  opacity: 1;
}

Das sind ja vier Befehle und nicht einer! Ja, allerdings, allerdings dienen alle vier dem selben Zweck. Da die CSS3-Spezifikationen noch nicht final sind, setzen die Browser-Hersteller hier vorerst noch auf eigene Versionen des Befehls. Damit die Animation dann auch in allen funktioniert, die sie unterstützen, müssen wir alle diese Versionen einbinden. Glücklicherweise ist die Syntax bis auf das Kürzel am Anfang gleich. Außerdem setzen wir die Standardversion des Befehls ans Ende, damit Browser später, wenn sie diese unterstützen auch den Standard verwenden.

Die einzelnen Teile des Befehls setzen sie wie folgt zusammen: Zu aller erst geben wir an, was wir animieren wollen. In diesem Fall lasse ich mit all alles animieren, was möglich ist. Der zweite Teil bestimmt die Dauer der Animation, die ich in meinem Beispiel auf 0,3 Sekunden gesetzt habe. Das ist schnell genug, um nicht zu nerven. Zu guter letzt legen wir noch fest, wie die Animation ablaufen soll. Mit linear sagen wir dem Browser, dass er eben linear animieren soll. Mit ease könnte man z.B. dafür sorgen, dass die Animation langsam beginnt, schneller wird und langsam wieder endet. Das ist für meine Beispiele und die kurze Laufzeit aber unnötig.

Fazit & Ausblick

Mit diesen simplen Befehlen hat man im Handumdrehen weiche Übergänge und muss dabei nicht mit komplizierten JavaScript-Funktionen hantieren! Ganz ohne Nachteile kommt die Animation aber leider auch nicht aus. Der Internet Explorer kann mit dem Befehl leider bisher nichts anfangen und ignoriert ihn. Ebenso tun das alte Versionen der meisten anderen Browser. Das machen auf meinem Blog laut Statistik aber nur noch etwa 20% der Besucher aus und zudem bekommen diese dann halt eben keine Animationen, wohl aber den nicht animierten Übergang zu sehen. Ein Makel, mit dem ich sehr gut leben kann!

Natürlich ist mein Beispiel noch das Einfachste vom Einfachen. Die Möglichkeiten sind riesig. Beispielsweise könnte man die Farbe anders und schneller animieren als die Sichtbarkeit oder den Seitenrand. Oder ihr lasst einen Text von links nach rechts schweben. Möglich wäre auch, Ein- und Austritt des Maus-Cursors in ein Element unterschiedlich zu animieren.

Hier noch ein paar Links zu weiterführenden Tutorials. Viel Spaß beim Nachbasteln!

  1. Die Angabe “filter” ist übrigens für den Internet-Explorer, der mit “opacity” nicht wirklich umgehen kann. []

Kommentare

1

Ich liebe CSS3. Da kommen so viele geniale Sachen. 🙂 Im Gegensatz zu dir versuche ich, vollständig auf Javascript zu verzichten, daher ist CSS3 noch wichtiger. Der Google +1-Button macht mir da leider einen Strich durch, aber alles andere geht.

Apropos Statistik. Hast du ne Idee, wieso bei mir ausgerechnet Netscape der meistgenutzte Browser ist? Das war früher nicht so. Ob der Botfilter meines Tools (Piwik) schlechter geworden ist? Glaube kaum, dass das alles normale User sind, sind immerhin 25-30%…

geschrieben von Konzertheld
antworten  •  Link
2

@Kon­zert­held: Ja, CSS3 ist wirklich toll, vor allem, weil sich so viel schon jetzt nutzen lässt, was dann in älteren Browsern zumindest nicht dazu führt, dass nichts mehr geht.

JavaScript selbst nutze ich an sich sehr gern, denn alles wird man auch CSS3 nie allein umsetzen können. JS ist heutzutage auch nicht mehr das Problemkind von früher. Grad für aufwendigere Menüs und Formular-Eingabe-Prüfungen setze ich gern darauf. Ajax ist auch noch so ein Spielplatz, mit dem ich vielleicht demnächst noch ein wenig herumprobieren will.

Netscape selbst ist ja an sich schon ewig ausgestorben. Vielleicht fasst Piwik aber auch einige Gecko-Browser (Firefox und ähnliche) als Netscape zusammen, denn die sind ja aus Netscape hervorgegangen. Könnten aber auch wirklich Bots sein.

geschrieben von beetFreeQ
antworten  •  Link
3

Hm, schnuffig 🙂 Mein geheimer Plan ist ja, dass ich irgendwann bald mal mein Theme entrümpele oder das Standard-Theme anpasse und da kommt sowas gerade recht.

Die entscheidende Frage für mich: wie ist das w3c-konform?

geschrieben von juliaL49
antworten  •  Link
4

@juliaL49: Also mein HTML ist nach W3C-Validator zu urteilen OK. Mein CSS nicht ganz so, was vor allem daran liegt, dass es noch keinen Validator gibt, der sauber die ganzen neuen CSS3-Features unterstützt und bei den Browser-Präfixen ein Auge zudrückt. Das nehme ich aber gern in Kauf, wenn ich dafür den Nutzer moderner Browser ein schöneres Design bieten kann, ohne mich mit zu viel unnötiger Grafik und Java-Script verbiegen muss. Und um seinen Code auf fehlende Semikola, Klammern und so abzuklopfen gibt’s ja auch andere Möglichkeiten.

geschrieben von beetFreeQ
antworten  •  Link
5

Hi … vielen Dank für den Hover Effekt .. ich kenne mich zwar schon gut aus würde ich sagen, aber einiges kann ich noch dazu lernen 😉 es ist schon fantastisch was man mit css 3 so alles machen kann … wenn du nochmehr tipps hast immer her damit … nice effekt … dachte gerade an einen sanften Hovereffekt als ich deinen TIpp gefunden habe, aber der hier ist ja noch viel besser 😉

geschrieben von Dony
antworten  •  Link
As soon as you're born, you start dying
So you might as well have a good time

Cake

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de