04. Oktober 2008

Einfacher CSS Klick-Effekt

Immer wieder stellt man sich als Webmaster, Designer oder allgemein Webentwickler wie man das navigieren durch die eigene Webseite erleichtern kann. Einzelne Usability Tests, Tipps und Erfahrungen sind bereits im Internet zu lesen. Wie wäre es, wenn der Besucher auch sieht, dass er irgendwo geklickt hat.

Das ist nichts besonderes, aber ich selber als User finde das schon praktisch, wenn ich erkenne, dass ich auf einen Link geklickt habe. Es kommt relativ häufig vor, dass ich auf einen Link klicke, es sich aber nichts tut (Überlastung der Seite o.ä.) oder sich herausstellt, dass dies gar kein Link ist, obwohl der so aussah. Um dem Besucher diesen anklickbaren Link besser darstellen zu können, möchte ich einen kleinen, aber netten CSS Effekt nennen.

Klickt doch einfach einmal auf diesen Link: Einfacher CSS Klick Effekt. Man sieht, dass der Link nun wie ein gedrückter Button erscheint, der kurz um 1 Pixel nach unten verschoben wird. Diese kurzzeitige Verschiebung macht dem Besucher optisch klar, dass er geklickt hat. Wem das zu schnell war, soll auf einen anderen Link auf meiner Seite klicken. Es sollten nahezu alle Links diesen Effekt besitzen.

Die Einbindung ist sehr simpel. Um diesen netten Klick Effekt auf alle Links anzuwenden muss nur folgender CSS Code ins Stylesheet eingefügt werden:

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

Probiert dies einmal aus. Ich finde dies hilfreich und ist zugleich nett anzusehen.

Kennt ihr andere hilfreiche Tipps und Einstellungen, um dem User gewisse Aktivitäten zu verdeutlichen? Dieser Effekt wäre auch wunderbar auf einem Button anwendbar.