Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: active

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: active

Es gibt sie tatsächlich: CSS-Funktionen, die jeder kennt, aber kaum jemand einsetzt. Wie man die :active-Pseudoklasse sinnvoll nutzen kann, erläutert Gerrit van Aaken.

Abgesehen davon, dass Alex Hong auf seiner Website typo.graphr.net unfassbar viel Sorgfalt in die Ausgestaltung der Typografie investiert hat, kam er zusätzlich auf eine verblüffend einfache Idee, um die haptische Anmutung der Seiten zu steigern: Die konsequente Anwendung der :active-Pseudoklasse! Was hat es damit auf sich?

In CSS 2 gibt es bekanntlich fünf mögliche Zustände von Hyperlinks:

  • a:link (Der Normalzustand)
  • a:visited (wenn das verlinkte Ziel schon einmal besucht wurde)
  • a:focus (wenn der Nutzer mit der Tastatur zu diesem Link gesprungen ist)
  • a:hover (wenn der Nutzer mit der Maus über den Link fährt)
  • a:active (Wenn der User auf den Link klickt)

Da der :active-Zustand naturgemäß eine eher flüchtige Angelegenheit ist (schließlich öffnet sich in der Regel eine Viertelsekunde später bereits eine neue Seite im Browser), sehen die meisten Webdesigner für ihn leider kein besonderes Styling vor. Doch da man als Anwender eigentlich bei jedem Mausklick ein direktes visuelles Feedback erwartet, tut es sehr gut, wenn jeder Link auch im :active-Zustand etwas bestimmtes tut. Alex Hong hat sich für einen simplen, aber wirkungsvollen Effekt entschieden: Der gesamte Link wandert einfach einen Pixel nach unten, solange die Maustaste gedrückt ist. Dabei entsteht die optische Wirkung eines leicht schwebenden Buttons, der nach unten gedrückt wird – klasse! So sieht das dann im CSS aus:

a:active {
  position: relative;
  top: 1px;
}

Einfacher geht es wirklich nicht, den Nutzer mit ein wenig mehr "Knöpfchen"-Feeling zu versorgen. Probieren Sie's mal aus!

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

Patrick
am 19.07.2008 - 09:49

Danke fuer den Tipp, das sieht echt klasse aus und laesst die Seite gleich "interaktiver" erscheinen.

Greetings

Permanenter Link

Eric Merten
am 19.07.2008 - 09:56

ok, als ich den artikel gelesen hatte und mir die ganze sache bildlich im geist vorgestellt habe, war ich schwer begeistert. die idee schien genauso subtil genial wie, es sein sollte.
In der realität sieht das dann doch irgendwie anders aus. zumindest ist mein klickverhalten anscheinend derart kurz, daß der effekt nicht richtig zur geltung kommt. bei einem normalen klick macht das dann doch irgendwie mehr den eindruck eines nervösen zuckens auf mich. gut, bei dauerhaft gedrückter maustaste ist die sache weitaus spannender. aber wer drückt schon sekundenlang auf ein link?
trotzdem guter artikel und hinweise auf alternativen sind immer gerne gesehen :)

Permanenter Link
Alexander Hahn

Alexander Hahn
am 19.07.2008 - 13:03

:active ist auf dem iPhone richtig lecker, denn hier sieht man diesen Status immer relativ lange.

Permanenter Link

Gerhard
am 19.07.2008 - 19:26

Wenn man Tastaturnutzern die gestrichelte Umrandung lässt sieht es allerdings nur halb so gut aus.

Permanenter Link

Laurra
am 19.07.2008 - 23:34

Das ist wirklich nicht schlecht. Sonst war ich immer eher gegen eine Verschiebung per Position, aber auf der Webseite sieht es sehr gut aus!

Permanenter Link

SonicHedgehog
am 20.07.2008 - 00:19

Also mir gefällt diese Darstellung nicht. Die umstrichelte Randung ist mir erstens lieber und eigentlich merke ich es so, dass mein Browser eine neue Seite lädt: Zu meiner Maus kommt das Ladesymbol hinzu und in der Statusleiste tut sich auch was ;-)

Permanenter Link
Sylvia Egger

Sylvia Egger
am 20.07.2008 - 18:16

Also ganz grundsätzlich finde ich das schon spannend, weil es grade eher verpönt ist, Bewegung dieser Art bei Links zu erzeugen. Das fällt dann meisthin eher hinter runter als lästige Spielerei. Insofern finde ich es mutig.

Interessant ist dabei - das ist mir ein wenig negativ aufgefallen -, dass a:active bei der Navigation über die Tastatur und bei Aktivierung sich nicht mehr bewegt, obwohl im CSS alles noch beim Alten ist. Eventuell überschreibt hier sich hier in der Hierarchie der Fokus.

Permanenter Link
David Maciejewski

David Maciejewski (Webkraut)
am 21.07.2008 - 10:34

So simpel, so gut.

Permanenter Link

Simon
am 21.07.2008 - 12:12

Momentan scheint die Seite down zu sein. Gewebkrautst?

Permanenter Link

Bastian
am 24.07.2008 - 12:25

Ohja, eine schöne Idee. Ich habe das active-Attribut zwar schon länger in gebrauch, aber auf die Runterrücknummer bin ich bisher nicht gekommen, weil ich es eigentlich nicht mag wenn Links auf der Seite herumspringen.

In diesem Fall ist es aber doch recht passend.
Habe ich gleich mal auf Pfannenwender umgesetezt, vielen Dank für den Tipp!

Permanenter Link

Oliver
am 01.08.2008 - 15:12

Wollte mir den Effekt mal im IE6 anschauen und da gibts dann noch einen viel schöneren Effekt auf der Seite zu sehen.

Aber probiert es am besten selbst aus.

Permanenter Link

Jannik
am 20.08.2008 - 06:04

Interessant ist (zumindest in FF 3.0), dass wenn man den Link drückt, gedrückt hält und zur Seite zieht (also ihn nicht aktiviert), bleibt der Effekt des Nach-unten-verschiebens bestehen.

So 100%ig zu funktionieren, scheint es ja nicht...

Permanenter Link

Die Kommentare sind geschlossen.