Navigation mit Parallelogrammen

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Zum anderen wird die zweimalige Transformation der Schrift durch Rundungsfehler womöglich nicht dasselbe ergeben wie das Original; das Schriftbild würde darunter leiden.

Zu sehen im IE. (In anderen Browsern sieht’s gut aus.)

Unschön an Variante 1 auch die zusätzlichen 'span'-Elemente (die den Text geraderücken) im Markup. Dafür ist wirklich das jeweils ganze Parallelogramm ('a'-Element) verlinkt.

Variante 2: 'li' wird schief, 'a' stellt den Text wieder gerade. An den Übergängen keine Verlinkung.

In Variante 2+ wird dies mit JavaScript behoben.

Richtig vernünftig ist aber erst Variante 3: Der Text wird gar nicht erst schiefgestellt, sondern ein Pseudoelement 'a:before' (Kindelement von 'a').

Der IE ist aber nicht vernünftig genug, die Transformationsmatrix auf generierten Inhalt anzuwenden. Dass er auch den Hover-Effekt dafäur nicht hinbekommt, ist das kleinere Problem.

Und wir reden hier über den 8er. Der 7er versagt schon beim generierten Inhalt.

Qapla'