Deckkraft

Unter Oskars Karte haben wir eine kleinere für Bella hinzugefügt, eine Katze, die schon ein neues Zuhause gefunden hat. Besucher sehen solche Happy Ends gern, aber die Karte soll nicht von den Katzen ablenken, die noch warten. Üblich ist, eine Karte verblassen zu lassen, um zu zeigen: „Hier ist alles erledigt.“

Im CSS-Kurs hast du die Eigenschaft opacity kennengelernt, und in Tailwind sind das die opacity-*-Klassen. Die Zahl ist ein Prozentwert: opacity-60 ist opacity: 60%, also dasselbe wie 0.6. opacity-0 macht ein Element unsichtbar (es braucht aber weiterhin seinen Platz), und opacity-100 ist voll sichtbar, der Standard. Jede Zahl von 0 bis 100 funktioniert, etwa opacity-25 oder opacity-80.

Denke an den Unterschied zu einer Farbe mit Schrägstrich wie bg-orange-500/50 aus der Lektion über Farben und Text: Der Schrägstrich macht nur diese eine Farbe durchsichtig. opacity lässt das ganze Element mit allem darin verblassen: seinen Text, Hintergrund, Rahmen, Bilder und die Elemente darin.

bg-orange-500/50

bg-orange-500 opacity-50

Weil die Elemente darin zusammen mit ihrem Elternelement verblassen, kann ein Kind nicht weniger durchsichtig sein als sein Elternelement: opacity-100 an der Überschrift einer verblassten Karte holt sie nicht zurück. Soll etwas darin klar bleiben, lasse nur die anderen Teile verblassen.