Kreativ werden mit :hover: Beispiele und Tipps

Es gibt mehr Möglichkeiten, als nur die Schrift- oder Hintergrundfarbe beim Rollover zu verändern.

  • von Lennart Prange

Es ist immer wieder überraschend, wenn man mit der Maus über ein Element auf einer Webseite fährt und etwas anderes passiert, als eine kleine Farbänderung.

Mittlerweile fallen mir diese kleinen Details immer häufiger ins Auge. Und solange man es richtig anstellt, macht es auch einen sehr positiven Eindruck. Jedenfalls auf mich.

In diesem Beitrag zeige ich euch, was Webdesigner mit der Pseudoklasse alles anstellen und gebe euch wie immer viele Tipps zum Thema.

Tipps

Bevor ich die Beispiele anführe und kommentiere, erst mal die Theorie. Wer sich um Rollover Effekte wirklich viele Gedanken macht, kümmert sich um die Details. Diese Details können den Unterschied zwischen einem herausragenden und einem guten Webdesign machen.

Wenn man sich damit beschäftigt, ist es meiner Meinung nach keine verschwendete Zeit, es ist aber sehr leicht, sich in diesen Details zu verlieren und darauf sollte man schon etwas achten.

  • Es darf überraschen – Man erwartet als Besucher eine Änderung der Schrift- oder Hintergrundfarbe und ist deswegen umso mehr überrascht, wenn plötzlich etwas ganz anderes, außergewöhnliches passiert.
  • Es muss passen – Achtet in jedem Fall darauf, dass der Effekt letztendlich auch ins Gesamtbild reinpasst. Der Nutzer darf zwar überrascht sein, er sollte aber nicht abgeschreckt werden. Die Stimmung darf nicht komplett zerstört werden. Diese Zerstörung kann man natürlich auch als Ziel haben, aber dann sollte man sehr genau wissen was man tut. Ich habe jedenfalls kein Beispiel gefunden, wo ein unpassender Rollover-Effekt irgendwas verbessert hätte.
  • Mobile Endgeräte versauen alles – Das Problem mit den iPads, iPhones usw. da draußen ist, dass sie nichts mit :hover anfangen können. Achtet darauf, dass eure Seite gut funktioniert. Auch wenn der Nutzer mit einem iPhone vorbei kommet.
  • Es sollte ein Link sein – Bei den Beispielen werdet ihr teilweise Elemente sehen, die zwar mit einem Rollover Effekt ausgestattet wurden, dabei aber keine Links sind. Das ist immer kritisch. Ich persönlich erwarte immer einen Link, wenn sich etwas verändert, sobald man mit der Maus darüber fährt und ertappe mich dabei, wie ich auf dem Element rumklicke. Vielleicht gilt das ja auch nur für mich.

Von simpel zu WOW

Jeder Link sollte meiner Meinung nach irgendeine Reaktion zeigen, wenn ein Besucher mit der Maus darüber fährt. Das ist einfach Benutzerfreundlich. Selbst wenn der Link offensichtlich ist, sollte irgendwas passieren.

Das fängt mit ganz einfachen “Effekten” an. Das ist zum Beispiel die Veränderung der Schrift- oder Hintergrundfarbe. Diese simplen Dinge reichen aus Usability Gesichtspunkten natürlich vollkommen aus, aber das ist ja kein Grund, an der Stelle aufzuhören. Viele Webdesigner haben mehr Aufwand betrieben, um mit der Pseudoklasse etwas außergewöhnliches anzustellen oder wenigstens aus der Masse hervorzustechen.

Launchlist

launchlist

Bei Launchlist erscheint eine kleine Sprechblase, wenn man mit der Maus über das Logo fährt. Gerade das Logo wird gerne verwendet, um etwas Interessantes mit der Pseudoklasse anzustellen.

In diesem Fall bin ich nicht 100%ig von der Idee überzeugt, denn Das Logo ist kein Link.

Das ist übrigens bei David Hellmann besser umgesetzt.

Creanto

creanto

Auch bei Creanto ist das Logo der “Tatort”. Allerdings ist das Ganze etwas aufwändiger, als beim letzten Beispiel.

Die Umsetzung ist hier wirklich recht interessant. Das Logo verändert sich nciht nur, wenn man mit der Maus darüberfährt, sondern auch, wenn man klickt. Auch ist das Logo aber kein Link zu irgendetwas, sondern nur eine Art Spielzeug. Trotzdem ganz nett gemacht.

Dragon Labs

Dragon Labs

In den “Laboren” von Dragon Interactive sind nicht nur gute Tutorials sondern auch ein sehr cooler Hover Effekt.

Die Blasen, die in den einzelnen Flüssigkeiten aufsteigen, sind zwar nicht nötig, aber trotzdem ein nettes Extra. Webdesign is in the details 😉

dconstruct

dConstruct 2010

Die einzelnen Sprecher der Veranstaltung sind hier durch Fotos an einem prominenten Platz in Szene gesetzt. Alle sind schwarz/weiß, was auch absolut vernünftig ist, wie ich finde. Sonst würden die vielen Farben das Gesamtbild stören.

Fährt man aber mit der Maus über ein Foto, wird es erstens farbig und zweitens wird der Name der Person angezeigt.

Diese Rollover Effekte bei Fotos sind sehr beliebt. Ob von schwaz/weiß zu farbig oder von scharf zu unscharf – es sieht meistens gut aus und kann auch sehr sinnvoll eingesetzt werden.

Mayflower

mayflower

Wenn man mit der Maus über die verschiedenen Sorten fährt (die sechs Buttons mit abgerundeten Ecken), passieren gleich mehrere Dinge: Im Hintergrund taucht ein roter Streifen auf, der Schlagschatten wird geringer, die Schrift heller, der Button wird leicht nach oben versetzt und der Hintergrund des Buttons verändert sich.

Es verändern sich also viele kleine Details. Entscheidend ist, dass es perfekt zur Seite passt. Hier passiert nichts wirklich Atemberaubendes, aber es ist doch wesentlich interessanter als das Meiste, was man auf anderen Seiten sieht. Viel mehr wäre auch übertrieben gewesen und hätte nicht in das Erscheinungsbild gepasst.

Von Seite zu Seite muss man entscheiden, wie man :hover benutzen möchte. Bei einem total minimalistischen Portfolio ist es dann vielleicht doch die Änderung der Schriftfarbe, die optimal reinpasst.

Digital Media 2011 Stockholm

Digital Media 2011 Stockholm

Ziemlich originell und überraschend finde ich die Idee, die hier umgesetzt wurde. Die Ganzen Bilder der Personen verändern sich.

Das ist natürlich etwas aufwändiger. Man muss von jeder Person zwei Fotos machen und sie einbauen. Es reicht nicht einfach eine CSS Eigenschaft zu ändern. Trotzdem war es meiner Ansicht nach die Mühe absolut wert. Denn dieser Effekt macht die Seite sehr interessant und gibt ihr das gewisse Etwas.

David DeSandro

David DeSandro

Hier wurde CSS mal etwas ausgereizt. Im Footer finden sich sehr viele Spielereien und auch wenn ich nicht alle so schön finde, gehört die Seite in diese Sammlung.

Der Footer wirkt auf mich eher wie eine kleine Bühne, auf der David DeSandro zeigt, was er kann. Meiner Ansicht nach, passen die drei Elemente nicht so gut zusammen. Es ist etwas zu viel des Guten.

Adham Dannaway

Adham Dannaway

Die Seite habe ich kürzlich erst erwähnt, und auch dort wurde in den Kommentaren bereits angemerkt, dass sie momentan extrem häufig verlinkt wird. Wie dem auch sei, sie passt einfach hier rein.

Hier steht der Rollover Effekt im Zentrum der Startseite und nicht nur die Idee sondern auch die Umsetzung passt.

Es ist ein wirklich gutes Beispiel dafür, wie kreativ man die Pseudoklasse einsetzen kann.

Vegaone

VEGAONE

Wer nach etwas Aufwändigem gesucht hat, sollte bei dieser Seite auf seine Kosten kommen. Schon der Splashscreen hält einige Effekte bereit und die eigentliche Seite geizt auch nicht gerade mit Rollover Effekten. Der Gestalter hat das wirklich eindrucksvoll umgesetzt.

In diesen Ganzen grafischen Leckerbissen steckt sicherlich extrem viel Arbeit, aber zweifellos zeigt das auch, wozu der Designer fähig ist. Es ist sicherlich nicht jedermanns Sachen und passt zu den wenigsten Webseiten. Die Seite ist in diesem Fall ja quasi “um die Rollover Effekte herum gebaut”. Sie sind der interessanteste und wahrscheinlich aufwändigste Teil der Webseite und nicht nur ein kleines Extra.

Fazit

Ich bin gespannt. Vielleicht tauchen in nächster Zeit ja ein paar mehr Webseiten auf, die ein paar Überraschungen bereit halten.

Selten habe ich so lange gebraucht, um passende Beispiele zu finden und das zeigt mir deutlich, dass hier noch viel Potenzial ist, um ausgefallene Ideen umzusetzen und sich abzuheben.

17 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.