Masken und Beschneidungen

[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