Shrnutí

V této lekci jsme z Oskarova obyčejného boxu udělali moderní kartu a dozvěděli jsme se, že:

• border dá prvku rámeček široký 1 pixel, border-2, border-4 a border-8 silnější (číslo je v pixelech). Preflight dává každému prvku border: 0 solid, takže stačí šířka.
• Rámeček má ve výchozím stavu barvu textu prvku (currentColor). Jinou barvu nastavíte z palety: border-stone-200.
• border-t, border-r, border-b, border-l, border-x a border-y nakreslí rámeček jen na některých stranách, s číslem i v jiné šířce: border-l-4.
• rounded-xs až rounded-3xl zaoblí rohy, rounded-full udělá pilulku nebo kruh a rounded-t-2xl a podobné třídy zaoblí jen některé rohy.
• shadow-xs až shadow-2xl přidají stín (vlastnost CSS box-shadow).
• V Tailwindu 4 se některé názvy změnily: rounded-xs a shadow-xs se v Tailwindu 3 jmenovaly rounded-sm a shadow-sm.
• Díky Preflightu jsou obrázky blokové prvky, které nikdy nejsou širší než jejich rodič a drží si poměr stran.
• object-cover vyplní box obrázku, aniž by obrázek zdeformoval, a co přečnívá, ořízne; object-contain do boxu vměstná celý obrázek.
• aspect-video, aspect-square a aspect-4/3 dají prvku poměr stran, takže se jeho výška řídí šířkou.
• overflow-hidden ořízne obsah i podél zaoblených rohů, takže se obrázek zaoblí spolu s kartou.
• opacity-60 a podobné třídy ztlumí celý prvek se vším, co obsahuje, na rozdíl od barvy s lomítkem, jako je bg-black/50.

V příští lekci, Flexbox, Grid a pozice, takové karty rozložíte vedle sebe a do mřížky a do rohu karty umístíte štítek.

Na procvičení tu máte kontaktní kartu pro web útulku. Dejte jí vzhled, jaký mají karty koček.