Masken und Beschneidungen

[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