Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: WinkeWinke

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: WinkeWinke

Wie im Juli versprochen, nutzen wir heute die Gelegenheit, euch einen vereinzelten Lichtblick im Rahmen der Sonnenseiten vorzustellen. Nicolai Schwarz zeigt ein simples, kleines Detail, das durch seinen besonderen Charme besticht.

Einer der einfachsten Effekte, die sich mit CSS umsetzen lassen, ist ein Mouse-Over durch ein :hover. Üblicherweise benutzen wir es bei Links oder vielleicht mal in Formularen. Aber natürlich ist ein hover in modernen Browsern nicht darauf beschränkt.

Screenshot: useqwitter.com

Quitter ist ein Service, der Nutzer von Twitter darüber informiert, wenn sie einen Follower verlieren. Abschied nehmen fällt schwer und so ist das Quitter-Maskottchen recht traurig. Zusätzlich winkt es aber zum Abschied, wenn man zufällig mit der Maus über den Arm fährt.

Der Arm ist ein transparentes png, das die zwei Zustände des Armes enthält. Das png steckt in einem div mit der id=hand. Über ein div#hand:hover wird nun einfach die Position verschoben, ein Hovereffekt mit CSS-Sprites.

Die Technik ist einfach, aber ich finde die Idee clever. Denn das Winken passt ideal zum Thema der Seite.

Die Entwickler haben sich übrigens nicht die Mühe gemacht, die Seite für den Internet Explorer 6 herzurichten. Transparente pngs und ein :hover-Effekt auf einem div lassen sich zwar mit JavaScript auch für den IE6 einrichten. In Anbetracht der Zielgruppe muss man die Seite aber evtl. auch nicht IE6-sicher machen.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Ute
am 28.10.2008 - 14:54

Eine schöne Idee, die du da beschreibst. Aus meiner Sicht, wäre es auch bei einer größeren Anzahl Nutzer des IE6 durchaus legitim, auf diese Spielerei für den IE6 zu verzichten.

Die Seite ist nicht so hübsch im IE, aber sie bleibt bedienbar, mehr ist aus meiner Sicht nicht mehr nötig.

Permanenter Link

Wowbagger
am 03.11.2008 - 23:25

Ist auf jeden Fall eine lustige Idee, allerdings frage ich mich, wo der Nutzwert dahiner steht. Es ist für mich ein Gag, der dem Nutzer keinen Zusatznutzen bringt und somit eigentlich nicht nötig ist. Wem es gefällt ok... für mich eine unnötige Spielerei, wenn auch technisch interessant umgesetzt.

Permanenter Link

tombeta
am 24.11.2008 - 23:49

es geht ja nicht immer nur um den puren nutzen. ab und an mal ein kleines gimmick einzubauen erhöht des spaßfaktor und fördert den bekannheitsgrad. solange die funktion nicht behindert oder in den hintergrund gedrängt wird und nur vereizelt solche gags zu finden sind, finde ich so etwas sogar förderlich für die site.
denn wer außergewöhnlich, vielleicht sogar witzig ist, an den wird sich eher erinnert.

außerdem finde ich das konzept von qwitter ziemlich gut. eine einfache idee, schlicht umgesetzt mit nem kleinen spaßfaktor. tolle sache.

Permanenter Link

Die Kommentare sind geschlossen.