Farb-Effekte
Wir haben bereits gesehen, wie man erreicht, dass ein Link sein Erscheinungsbild verändert, sobald man mit der Maus darüber fährt. Dieses Effekt kann man noch etwas eleganter gestalten, indem man Transitions (Übergänge) verwendet.
Hier sehen wir Farbeffekte:
Darstellung im Browser:
Die Effekte wurden (natürlich) mit CSS erzeugt. Unter dem Tag nav a:hover finden wir den Eintrag transition: color 0.5s, background 0.5s;. Dieser besagt, dass ein fließender Übergang für die Textfarbe und die Hintergrundfarbe verwendet werden soll. Beide Übergänge sollen eine halbe Sekunde lang sein. Sobald wir also mit der Maus über einen Link in der Navigation fahren, finden diese Übergänge statt.
Verlassen wir mit der Maus einen Link, so haben wir langsamere Übergänge zurück zu den normalen Farben. Dies wurde im Tag nav a mit dem Eintrag transition: color 1s, background 1s; erreicht.