Maschinendenk

Fisheye Effekt mit CSS

1 Kommentar

Paul Armstrong hat in seinem Blog einen Post veröffentlicht, in dem er ein kleines CSS Snippet vorstellt, das es ermöglicht einen “Fisheye” Effekt in HTML Listen zu implementieren.

Dieser Effekt ist bekannt zb von der KDE Oberfläche unter Linux.

Es wird nicht nur der aktuell gehooverte Link vergrössert sondern auch noch, abgestuft, die darauf folgenden Listeneinträge.

Beispiel:
fisheye

Ich muss sagen ich finde diesen Effekt für Web-UIs eher störend, als hilfreich.
Er erhöht nicht die Übersicht.

Dafür ;) ist die CSS Implementierung des ganzen wirklich nett:

li { font-size: 1em; }
li:hover { font-size: 2.5em; }
li:hover + li { font-size: 2em; }
li:hover + li + li { font-size: 1.5em; }

Das ist wirklich clever, und sehr simpel. Wer also einen solchen Effekt haben will, sollte sich den Post mal anschauen.

Link: http://paularmstrongdesigns.com/weblog/css/navigation-magnification


Geschrieben von Philipp

10. Februar 2006 um 2:04

Veröffentlicht in CSS, Code

« Tutorial: RSS Ticker mit Ajax
Scriptaculous: Andere Character Encoding als UTF8 verwenden »

1 Kommentar zu 'Fisheye Effekt mit CSS'

Kommentare abonnieren mit RSS oder TrackBack zu 'Fisheye Effekt mit CSS'.

  1. Der Effekt ist nur störend, weil er nicht homogen bzw. intuitiv konsequent ist.

    Deutlich mehr Akzeptanz hätte etwas in dieser Art (was natürlich so nicht funktionieren kann):

    li { font-size: 1em; }
    li:hover { font-size: 2.5em; }
    li:hover + li { font-size: 2em; }
    li:hover + li + li { font-size: 1.5em; }
    li:hover - li { font-size: 2em; }
    li:hover - li - li { font-size: 1.5em; }

    … also die vorherigen auch gestuft vergrößert.

    Aber vielleicht gibt sich mal jemand Mühe…

    ramipe

    6 Jun 06 um 6:32

Kommentar schreiben