Zusammenfassung

In dieser Lektion haben wir Oskars schlichte Box in eine moderne Karte verwandelt und gelernt:

• border gibt einem Element einen 1 Pixel breiten Rahmen, border-2, border-4 und border-8 dickere (die Zahl ist in Pixeln). Preflight gibt jedem Element border: 0 solid, eine Breite genügt also.
• Ein Rahmen hat standardmäßig die Textfarbe des Elements (currentColor). Eine andere Farbe kommt aus der Palette: border-stone-200.
• border-t, border-r, border-b, border-l, border-x und border-y zeichnen einen Rahmen nur auf einigen Seiten, auch mit einer Breite: border-l-4.
• rounded-xs bis rounded-3xl runden die Ecken ab, rounded-full macht eine Pille oder einen Kreis, und rounded-t-2xl und ähnliche runden nur einige Ecken ab.
• shadow-xs bis shadow-2xl fügen einen Schatten hinzu (die CSS-Eigenschaft box-shadow).
• In Tailwind 4 haben sich einige Namen geändert: rounded-xs und shadow-xs heißen in Tailwind 3 rounded-sm und shadow-sm.
• Dank Preflight sind Bilder Blöcke, die nie breiter als ihr Elternelement sind und ihr Seitenverhältnis behalten.
• object-cover füllt die Box des Bildes, ohne es zu verzerren, und schneidet ab, was übersteht; object-contain passt das ganze Bild hinein.
• aspect-video, aspect-square und aspect-4/3 geben einem Element ein Seitenverhältnis, seine Höhe folgt also seiner Breite.
• overflow-hidden schneidet den Inhalt auch entlang abgerundeter Ecken ab, ein Bild wird also mit seiner Karte abgerundet.
• opacity-60 und ähnliche lassen ein ganzes Element mit allem darin verblassen, anders als eine Farbe mit Schrägstrich wie bg-black/50.

In der nächsten Lektion, Flexbox, Grid und Position, ordnest du Karten wie diese nebeneinander und in einem Raster an und setzt ein Badge in die Ecke einer Karte.

Zum Üben haben wir hier eine Kontaktkarte für die Website des Tierheims. Gib ihr das Aussehen einer Karte.