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 ↩︎