Masken und Beschneidungen

[Matthias Scharwies]

Guten Morgen,

eigentlich wollte ich Bilder beim Lazy loading einblenden und bin über einen älteren Artikel gestoßen:

Masken und Beschneidungen/Masken

Mittlerweile ist fast alles von allen modernen Browsern unterstützt.

Gestern auf dem Stammtisch (5 Mitglieder und zwei Interessierte; Sven kennen wir ja schon, danke für eure Teilnahme!) hatte ich noch einige Anregungen erhalten, bei denen ich um euer erneutes Feedback bitte.

1.a Exkurs: Icons färben

Gestern ist mir das auf die Schnelle nicht gelungen, die Hintergrundfarbe wurde ja durch das (nicht entfernte) img verdeckt!

Passt das in den Verlauf des Tutorials?

3.a Hero-Images

Das Beispiel mit dem durchscheinenden footer hat mich nicht sonderlich überzeugt. Ein schwarzer Hintergrund wirkte zu unaufdringlich (oder ist das sogar gut?) in dunkelgrün wirkt's eher so „na ja“!

Vorschläge erbeten.

3.b

Spielerei oder genialer Effekt?

4. Perforation_mit_mask-border

Das habe ich bereinigt - wenn's im Firefox nicht geht, ist das nicht weiter schlimm.

[EDIT] Es geht aber auch im Safari nicht - der Rand wird perforiert, die Bildmitte aber ausgeschnitten! 😟 [/EDIT]

5. Exkurs:_mask-size

So sahen „Tutorials“ früher aus: Eine Einleitung, eine Liste aller Eigenschaften und dann ein Beispiel.

Die Eigenschaft mask-size ist ja schon im 1. Beispiel erklärt und demonstriert worden - ich würde dieses Beispiel entfernen.

---

Grundsätzliches zu Tutorials

Es gab ja Diskussionen, wie gute Tutorials auszusehen hätten.

Ich glaube, dass Ziel sein muss,

• mit guten Beispielen anschaulich zu erklären,
• vom einfachen zum Schwierigen kommen,
• jeden neuen Begriff einführen und erklären,
• aber nicht Benötigtes so weit wie möglich wegzulassen

Der Abschnitt zu mask-size ist aus einer Zeit übrig geblieben, als SELFHTML jede Eigenschaft in einer Einzelseite erklären wollte. Imho kann man nach 14 Jahren sagen, dass dieser Ansatz

• die Übersicht der alten Doku aufgab, die alle Eigenschaften eines Themas untereinander listete^[1]
• Übersichtsseiten nicht wirklich übersichtlich waren, da dort oft nur die Eigenschaftsnamen standen.
• im Beispielen oft zu viele Werte vorstellte - Der MDN würde da Auswahlmöglichkeiten anbieten.

Ich würde mich freuen, wenn wir uns da über den Sommer Gedanken machen könnten und dann zusammen

• einerseits Grundsätze festlegen
• anderseits bestehende Tutorials sichten und verbessern

könnten.

Herzliche Grüße

Matthias Scharwies

---

1. Damals gab's aber noch keine 500 Eigenschaften https://forum.selfhtml.org/self/2024/jul/16/neue-css-eigenschaften-wie-viele-sinds-denn/1816136#m1816136 ↩︎

[Rolf B]

Hallo Matthias,

1a) funktioniert bei mir (Edge). Sofern „funktionieren“ dies sein soll: Ich sehe die gefärbte Wolke, und bei :hover sehe ich die vollflächige Farbe.

3a) ist nicht nützlich, finde ich. Weil man

	background-color: darkgreen;
	mask-image: linear-gradient(transparent, black 50%);

einfacher als

	background-image: linear-gradient(transparent, darkgreen 50%);

realisieren kann. Zweites „Hmmm“: Ein absolut positionierter Footer ist für dieses Beispiel okay, aber das ist Technik von 2010. Heute sollte man eher ein Fullpage-Grid machen und den Footer damit unten ankleben. Oder vielleicht eher eine figure machen, die das Bild enthält, und den Effekt auf die figcaption anwenden.

4. Ich habe zwar noch nicht wirklich Ahnung vom Thema, aber das Performationsbeispiel war noch müllig. Teils hast Du Dich bei Eigenschaftsnamen vertippt, hinzu kommt, dass die MDN Doku falsch ist und es im Netz scheinbar auch nirgends was besseres gibt. Aber mit Try und Error hab ich rausgefunden, dass die Parameter für -webkit-mask-box-image denen für mask-border entsprechen (bis auf die mode-Angabe), und dass repeat nicht die beste Idee ist. space ist besser. Und eine width-Angabe von 5% macht es gefälliger. Die slice-Angabe muss 25% sein, nicht 30. Wenn überhaupt, dann 35.5, weil das SVG 142x142 ist. Die 30 hast Du aus MDN übernommen, wo das Maskenbild aber gedrittelt werden konnte und 90x90 groß war.

Ich habe das mal gründlich überarbeitet. Das Bild sollten wir – wenn das Copyright das zulässt – noch ins Wiki hochladen oder als data-URL codieren. Ein Bild aus dem US-Teil von AWS zu laden enthält – scheint mir – eine DSGVO-Tretmine.

5. Ok. Wenn Tutorials so aussehen, sind sie definitiv Mist, weil das eine Doppelung der Referenzinformation ist. Dieses Beispiel gehört auf die Referenzseite. Ein Tutorial kann mask-size in einem Beispiel sinnvoll nutzen, sollte aber nicht im Detail erklären, wie die Eigenschaft funktioniert. Dumm nur, dass wir mit diesem Anspruch etliche Tutorials überarbeiten müssten. Das sollte man vielleicht erstmal breiter diskutieren.

Rolf

[Auge]

Hallo

1a) funktioniert bei mir (Edge). Sofern „funktionieren“ dies sein soll: Ich sehe die gefärbte Wolke, und bei :hover sehe ich die vollflächige Farbe.

Als Ergänzung: im Firefox/Libre Wolf 128.0.2 (unter Windows 10) sieht das genau so, wie du es beschreibst, aus.

Das ist offensichtlich als Fortführung des vorherigen Abschnitts gedacht, bei dem erklärtermaßen beim hovern die Maske entfernt wird. So findest du, wenn du dem Link „ausprobieren“ folgst, auch den passenden Code.

div:hover {
	mask: none;
}

Dass hier die zuvor auch im Code gezeigte Ausblendung stattfindet, sollte vielleicht in einem Halbsatz erwähnt werden (wie oben schon gezeigt …). Ich fand das etwas überraschend gerade auch, weil ich dem Link im Ausgangsposting gefolgt war und damit den vorherigen Abschnitt nicht gesehen und gelesen hatte.

🤔 .o(Aha, ein vollfarbiges Quadrat. Soll das so?)

Tschö, Auge

[Matthias Scharwies]

Servus!

Hallo Matthias,

1a) funktioniert bei mir (Edge). Sofern „funktionieren“ dies sein soll: Ich sehe die gefärbte Wolke, und bei :hover sehe ich die vollflächige Farbe.

Danke an Dich und an @Auge Ich habe das :hover {mask:none} entfernt. Das wird im ersten Beispiel glaub ich gut genug erklärt.

Also:

1.a drinlassen und ToDo entfernen?

3a) ist nicht nützlich, finde ich. Weil man

	background-color: darkgreen;
	mask-image: linear-gradient(transparent, black 50%);

einfacher als

	background-image: linear-gradient(transparent, darkgreen 50%);

realisieren kann. Zweites „Hmmm“: Ein absolut positionierter Footer ist für dieses Beispiel okay, aber das ist Technik von 2010. Heute sollte man eher ein Fullpage-Grid machen und den Footer damit unten ankleben. Oder vielleicht eher eine figure machen, die das Bild enthält, und den Effekt auf die figcaption anwenden.

Oder eine Seite wie bei der Zeitung, deren untere Hälfe weiß ausgeblendet wird, und erst nach einem Abo freigeschaltet wird.

Wäre das ein Beispiel, das ihr sehen wollt?

Also:

Beispiel 3.a und ToDo entfernen?

4. Ich habe zwar noch nicht wirklich Ahnung vom Thema, aber das Performationsbeispiel war noch müllig. Teils hast Du Dich bei Eigenschaftsnamen vertippt, hinzu kommt, dass die MDN Doku falsch ist und es im Netz scheinbar auch nirgends was besseres gibt. Aber mit Try und Error hab ich rausgefunden, dass die Parameter für -webkit-mask-box-image denen für mask-border entsprechen (bis auf die mode-Angabe), und dass repeat nicht die beste Idee ist. space ist besser. Und eine width-Angabe von 5% macht es gefälliger. Die slice-Angabe muss 25% sein, nicht 30. Wenn überhaupt, dann 35.5, weil das SVG 142x142 ist. Die 30 hast Du aus MDN übernommen, wo das Maskenbild aber gedrittelt werden konnte und 90x90 groß war.

Ich habe das mal gründlich überarbeitet. Das Bild sollten wir – wenn das Copyright das zulässt – noch ins Wiki hochladen oder als data-URL codieren. Ein Bild aus dem US-Teil von AWS zu laden enthält – scheint mir – eine DSGVO-Tretmine.

Ja, das hatte ich ganz auf die Schnelle noch gemacht - da können wir noch drüber reden, ob das überhaupt sinnvoll ist.

Die Grafik könnte man auch als Base64codiert in der URL-Funktion notieren.

5. Ok. Wenn Tutorials so aussehen, sind sie definitiv Mist, weil das eine Doppelung der Referenzinformation ist. Dieses Beispiel gehört auf die Referenzseite. Ein Tutorial kann mask-size in einem Beispiel sinnvoll nutzen, sollte aber nicht im Detail erklären, wie die Eigenschaft funktioniert.

Volle Zustimmung! Ist halt historisch so gewachsen.

Dumm nur, dass wir mit diesem Anspruch etliche Tutorials überarbeiten müssten. Das sollte man vielleicht erstmal breiter diskutieren.

Ja, auf jeden Fall!

Mein Vorschlag wäre, das peu à peu anzupacken.

Auf der MV im Herbst wäre es gut, wenn wir dort ein Developer Team einsetzen, dass sich „Wie sehen gute Tutorials aus“ vornimmt und überarbeitet. Nicht nur als Regeln, was man muss, bzw. nicht darf, sondern wie man …

• die Zielgruppe am Besten erreicht.
• Schwieriges mit einfachen Worten erklärt.
• zum richtigen Zeitpunkt aufhört und auf das nächste Tutorial verweist.

@all Ich würde mich freuen, wenn ihr weitere Vorschläge für gute Beispiele (danke an @Felix Riesterer für die Idee Icons einzufärben) und Kritikpunkte anbringt.

Auch das erste Kapitel über clip-path ~kann~/sollte diskutiert werden:

• Masken und Beschneidungen

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen!

4. Ich habe zwar noch nicht wirklich Ahnung vom Thema, aber das Performationsbeispiel war noch müllig. Teils hast Du Dich bei Eigenschaftsnamen vertippt, hinzu kommt, dass die MDN Doku falsch ist und es im Netz scheinbar auch nirgends was besseres gibt. Aber mit Try und Error hab ich rausgefunden, dass die Parameter für -webkit-mask-box-image denen für mask-border entsprechen (bis auf die mode-Angabe), und dass repeat nicht die beste Idee ist. space ist besser. Und eine width-Angabe von 5% macht es gefälliger. Die slice-Angabe muss 25% sein, nicht 30. Wenn überhaupt, dann 35.5, weil das SVG 142x142 ist. Die 30 hast Du aus MDN übernommen, wo das Maskenbild aber gedrittelt werden konnte und 90x90 groß war.

Ich habe das mal gründlich überarbeitet. Das Bild sollten wir – wenn das Copyright das zulässt – noch ins Wiki hochladen oder als data-URL codieren. Ein Bild aus dem US-Teil von AWS zu laden enthält – scheint mir – eine DSGVO-Tretmine.

Das Bild ist als SVG hochgeladen - Sollte man die Größe von 142x142 auf einen „runden“ Wert anpassen?

Beispiel:CSS3_mask-border.html#view_result

@JürgenB @all Wie sieht das im Safari aus?

---

Sollte man diese Vorlage für border-image auch als SVG hochladen?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

Sollte man die Größe von 142x142 auf einen „runden“ Wert anpassen?

Ich glaube, das ist nicht nötig. Um nicht zusagen: „Macht nix“.

Rolf

[JürgenB]

Hallo Matthias,

@JürgenB @all Wie sieht das im Safari aus?

auf dem PC und dem iPhone sieht das rechte Bild aus, wie eine Briefmarke.

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Matthias,

@JürgenB @all Wie sieht das im Safari aus?

auf dem PC und dem iPhone sieht das rechte Bild aus, wie eine Briefmarke.

So soll es sein! Danke!

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Matthias,

Masken und Beschneidungen/Masken

cool! (mein erster Eindruck)

Liebe Grüße

Felix Riesterer