Kanten eckig machen mit CSS

[Christian Wansart]

Guten Morgen,

ich möchte gerne einen „direction aware hover effect“ bauen mit CSS. Einige fertige Lösungen im Netz sind mit JavaScript gemacht, was ich aber für unsinnig halte, wenn ich extra dafür JavaScript einbinden müsste.

Mein Ansatz wäre, dass ich eine Box erstelle, in dieser füge ich 4 Elemente – ich denke div dürfte sich da anbieten – Elemente an die vier Ränder ein und prüfe lasse je nach dem über welches Element man „rein kommt“, die entsprechende Animations-Richtung abspielen lassen.

Die weiße Fläche im Hintergrund ist die eigentliche Box. Dort soll der Inhalt und der MouseOver-Effekt hin. Die 4 rot, grün, blau und gelb gefärbten Ränder möchte ich für den MouseOver-Effekt nutzen.

Mein Problem ist, dass sich die 4 Ränder-Elemente überdecken können, also war meine Idee border-radius zu verwenden. Das funktioniert soweit auch ganz gut, jedoch wäre es schöner, wenn sie schön gerade aneinander abschließen würden, wie auf dem obigen Beispielbild.

Ist das mit border-radius oder einem anderen Element möglich? Wichtig ist, nicht, dass es optisch ist, sondern nur wegen dem MouseOver. Ich bin mir nicht sicher, ob es da andere CSS-Eigenschaften gibt, die mir das so ermöglichen.

Freundliche Grüße
Christian

[MudGuard]

Hi,

Mein Problem ist, dass sich die 4 Ränder-Elemente überdecken können, also war meine Idee border-radius zu verwenden. Das funktioniert soweit auch ganz gut, jedoch wäre es schöner, wenn sie schön gerade aneinander abschließen würden, wie auf dem obigen Beispielbild. Ist das mit border-radius oder einem anderen Element möglich? Wichtig ist, nicht, dass es optisch ist, sondern nur wegen dem MouseOver. Ich bin mir nicht sicher, ob es da andere CSS-Eigenschaften gibt, die mir das so ermöglichen.

transform - und damit das Element trapezförmig umformen.

(ich weiß zwar, daß das geht, aber wie das genau zu machen ist, darfst Du selber rausfinden)

cu,
Andreas a/k/a MudGuard

[Christian Wansart]

Guten Tag Andreas,

das ist eine gute Idee,ich probiere es mal aus.

Danke.

Freundliche Grüße
Christian

[marctrix]

Hej Christian,

das ist eine gute Idee,ich probiere es mal aus.

Interessantes Problem. Hier ein wenig Starthilfe von Lea Verou. Marc

[Rolf b]

Hallo Christian,

vielleicht bin ich ja begriffsstutzig, aber kann das funktionieren? Du hast die "Eintrittsbereiche", die den Mouseover-Effekt auslösen. Und den Innenbereich, dem Du keinen Mouseover-Effekt zuweisen KANNST, weil du ja im Innenbereich die Richtung nicht weißt aus der Du kommst. D.h. in der Mitte kannst Du nicht animieren, sondern nur den Endzustand des Hovereffekts auslösen.

Darüber hinaus willst Du durch Betreten eines Randbereichs (also ein Kind des eigentlichen DIV?) eine Animation auslösen die das ganze DIV erfasst. Klingt nach Bedarf für einen Parent-Selector, den es in CSS aber nicht gibt.

Wenn du das gelöst hast, noch diese Überlegung: Wenn jemand langsam und in der Mitte einer Box-Kante die Maus in die Box hineinschiebt, dürfte dein Plan aufgehen. Aber was ist, wenn jemand in der Nähe der Ecke in die Box hineinkommt und dabei die Grenze zwischen - beispielsweise - rot und blau überschreitet? Dann beginnt die Animation von links und schaltet abrupt auf "von oben" um. Oder was ist, wenn man "zu schnell" mit der Maus in den weißen Bereich fährt? Dann beginnt die Animation und endet abrupt im Endzustand.

Vielleicht muss man vier normal rechteckige DIVs machen, die alle auf gleichem Z-Index übereinanderliegen und von denen jedes nur um 1-2 Pixel aus dem Stapel herausschaut. Eins oben, eins links, eins rechts und eins unten. Im :hover setzt du den z-index hoch, damit es auf jeden Fall den Mausfokus behält wenn Du weiter nach innen gehst, und machst dann in diesem DIV die Animation.

Rolf

[Gunnar Bittersmann]

@@Christian Wansart

ich möchte gerne einen „direction aware hover effect“ bauen mit CSS. Einige fertige Lösungen im Netz sind mit JavaScript gemacht, was ich aber für unsinnig halte, wenn ich extra dafür JavaScript einbinden müsste.

Mein Ansatz wäre, dass ich eine Box erstelle, in dieser füge ich 4 Elemente – ich denke div dürfte sich da anbieten – Elemente an die vier Ränder ein

Statt JavaScript einzubinden willst du 4 div-Elemente ins Markup einfügen? Ich halte das für unsinnig.

LLAP 🖖

[Christian Wansart]

Guten Morgen Gunnar,

wow, wenn das von dir kommt, heißt das wirklich was. 😅

Ich muss mal schauen, wie ich das mache. Nach Rolfs Beitrag bin ich wirklich ins Grübeln gekommen, ob das mit CSS wirklich so eine gute Idee ist.

Besten dank und freundliche Grüße
Christian

[Rolf b]

Naja, ich habe nur einen Vorschlag gemacht, was man tun KÖNNTE, um eine scriptfreie Lösung zu bekommen. Die Entscheidung, ob man es tut, obliegt dem OP. Mein Hauptanliegen war, darzustellen, dass die Idee mit den 4 Trapezen am Rand nicht hinreichend ist.

Rolf