Webkrauts: Für mehr Qualität im Web.

Artikel

Sonnenseiten: active

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!

Zum Autor

Gerrit van Aaken ist freiberuflicher Webdesigner und passionierter Blogger aus Hochheim am Main. Sein Steckenpferd ist die Typografie im Allgemeinen und elegante CSS-Lösungen im Speziellen.

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.

Info:

Sonnenseiten: active ist Beitrag Nr. 414

Autor:

Gerrit van Aaken am 19. Juli 2008 um 08:00

Kategorie:

Sonnenseiten

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

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

   Greetings

   Kommentar von Patrick - 19. Juli 2008 um 09:49

2. 2.
   

   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

   Kommentar von Eric Merten - 19. Juli 2008 um 09:56

3. 3.
   

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

   Kommentar von Alexander Hahn - 19. Juli 2008 um 13:03

4. 4.
   

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

   Kommentar von Gerhard - 19. Juli 2008 um 19:26

5. 5.
   

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

   Kommentar von Laurra - 19. Juli 2008 um 23:34

6. 6.
   

   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

   Kommentar von SonicHedgehog - 20. Juli 2008 um 00:19

7. 7.
   

   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.

   Kommentar von sprungmarker - 20. Juli 2008 um 18:16

8. 8.
   

   So simpel, so gut.

   Kommentar von macx - 21. Juli 2008 um 10:34

9. 9.
   

   Momentan scheint die Seite down zu sein. Gewebkrautst?

   Kommentar von Simon - 21. Juli 2008 um 12:12

10. 10.
    

    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!

    Kommentar von Bastian - 24. Juli 2008 um 12:25

11. 11.
    

    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.

    Kommentar von Oliver - 1. August 2008 um 15:12

12. 12.
    

    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…

    Kommentar von Jannik - 20. August 2008 um 06:04

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.