Průhlednost

Pod Oskarovu kartu jsme přidali menší kartu pro Bellu, kočku, která si už našla nový domov. Návštěvníci takové šťastné konce rádi vidí, ale karta by neměla odvádět pozornost od koček, které na domov teprve čekají. Běžně se to řeší tak, že se karta ztlumí: udělá se částečně průhledná, jako by říkala „tohle už je vyřízené“.

V kurzu CSS jste poznali vlastnost opacity (neprůhlednost) a v Tailwindu jí odpovídají třídy opacity-*. Číslo udává procenta: opacity-60 je opacity: 60%, tedy totéž co 0.6. Třída opacity-0 prvek zneviditelní (své místo ale zabírá dál) a opacity-100 znamená plně viditelný prvek, výchozí stav. Funguje jakékoli číslo od 0 do 100, třeba opacity-25 nebo opacity-80.

Pamatujte na rozdíl oproti barvě s lomítkem, jako je bg-orange-500/50, z lekce o barvách a textu: lomítko zprůhlední jen tu jednu barvu. opacity ztlumí celý prvek se vším, co obsahuje: s textem, pozadím, rámečkem, obrázky i prvky uvnitř.

bg-orange-500/50

bg-orange-500 opacity-50

Protože se prvky uvnitř ztlumí spolu se svým rodičem, nemůže být dítě méně průhledné než rodič: opacity-100 na nadpisu ve ztlumené kartě ho nevrátí. Pokud má něco uvnitř zůstat výrazné, ztlumte jen ostatní části.