Hexagon

[Jonas]

Hallo zusammen!

Ich beschäftige mich erst seit ein paar Wochen mit der HTML und CSS Codierung und bin deswegen noch nicht richtig in der Materie. Bei dem folgenden Problem stoße ich an meine Grenzen: Ein Photo liegt über (z-index) einem Hexagon bestehend aus drei Rechtecken. Das gesamte Photo ist sichtbar. Nun soll es so formatiert werden, dass nur noch die Fläche oberhalb des Hexagons für den Benutzer sichtbar ist. Gibt es dafür einen Befehl oder irgendeinen Trick?

Danke im Voraus!

[ChrisB]

Yo!

Ein Photo liegt über (z-index) einem Hexagon bestehend aus drei Rechtecken. Das gesamte Photo ist sichtbar. Nun soll es so formatiert werden, dass nur noch die Fläche oberhalb des Hexagons für den Benutzer sichtbar ist. Gibt es dafür einen Befehl oder irgendeinen Trick?

Dafür musst du entweder eine Grafik, auf der das Hexagon transparent ist, darüber legen (so dass der Rest der Grafik also den Rand „drumherum“ bildet) – oder ein SVG als Filter nutzen.

MfG ChrisB

[Gunnar Bittersmann]

Dafür musst du entweder eine Grafik, auf der das Hexagon transparent ist, darüber legen (so dass der Rest der Grafik also den Rand „drumherum“ bildet)

Buh!

– oder ein SVG als Filter nutzen.

Das wäre der bevorzugte Weg. (IE zeigt sich davon noch unbeeindruckt.)

Ginge aber auch anders.

LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ginge aber auch anders.

Es gibt Leute, die machen ganze Zeichensätze mit CSS. http://yusugomori.com/projects/css-sans/fonts

Zum Testen: http://yusugomori.com/projects/css-sans/archive

Und irgendwo gabs auch mal die Simpsons rein aus CSS.

Bis demnächst

Matthias

[Auge]

Hallo

Und irgendwo gabs auch mal die Simpsons rein aus CSS.

Nicht irgendwo, sondern bei Chris Pattle auf Github.

Manchmal lohnt es sich doch, solch Schabernack in die Lesezeichen zu packen. :-)

Tschö, Auge

PS: Meine erste CSS-Menschelei. :-)

[Matthias Apsel]

Hallo Auge,

Nicht irgendwo, sondern bei Chris Pattle auf Github.

Genau, ich hatte es 2014 schon mal im Forum verlinkt.

PS: Meine erste CSS-Menschelei. :-)

Cool, ne? Du kennst bestimmt twitter/CSSHumor.

Bis demnächst
Matthias

[Auge]

Hallo

PS: Meine erste CSS-Menschelei. :-)

Cool, ne? Du kennst bestimmt twitter/CSSHumor.

Da ich Twitter nicht nutze, nicht. Es sind aber ein paar nette Sachen dabei.

Tschö, Auge

[Gunnar Bittersmann]

@@Matthias Apsel

Cool, ne? Du kennst bestimmt twitter/CSSHumor.

Und Jed Schmidts großartige Inros zur CSSConf EU: 2013, 2014.

LLAP

[Klawischnigg]

Hi there,

Ginge aber auch anders.

Sehr schön. Danke für das Aufzeigen dieser Lösung...

[Jonas]

Dafür musst du entweder eine Grafik, auf der das Hexagon transparent ist, darüber legen (so dass der Rest der Grafik also den Rand „drumherum“ bildet)

Buh!

– oder ein SVG als Filter nutzen.

Das wäre der bevorzugte Weg. (IE zeigt sich davon noch unbeeindruckt.)

Ginge aber auch anders.

LLAP

Die Fake-Hexagon Variante funktioniert wunderbar! Danke für den Tipp! Wenn ich es dennoch mit einem SVG Filter versuchen wollte, welche Art von Filter brauche ich dafür denn?

[Matthias Scharwies]

Die Fake-Hexagon Variante funktioniert wunderbar! Danke für den Tipp! Wenn ich es dennoch mit einem SVG Filter versuchen wollte, welche Art von Filter brauche ich dafür denn?

Keinen Filter sondern SVG/clipPath

Als Form ein Polygon oder Pfad

LG Matthias

[Gunnar Bittersmann]

Das wäre der bevorzugte Weg. (IE zeigt sich davon noch unbeeindruckt.) Wenn ich es dennoch mit einem SVG Filter versuchen wollte, welche Art von Filter brauche ich dafür denn?

Du bist dem Link zu Can I use… gefolgt? Gut. Da steht doch als Überschrift „CSS clip-path property“. Wenn man damit wenig anfangen kann, gibt man das in die Suchmaschine seiner Wahl ein.

Oben in den SERPs: Chris Coyiers Almanac.

Wie man aus Can I use… entnehmen kann, braucht man für WebKit/Blink nicht einmal SVG. So sieht’s aus.

LLAP