Прозрачность

Под карточкой Оскара мы добавили карточку поменьше — для Беллы, кошки, которая уже нашла новый дом. Посетителям нравятся такие счастливые финалы, но эта карточка не должна отвлекать внимание от кошек, которые всё ещё ждут. Распространённый способ сказать «с этой уже всё решено» — сделать карточку бледнее.

В курсе CSS вы познакомились со свойством opacity, а в Tailwind это классы opacity-*. Число — это проценты: opacity-60 — это opacity: 60%, то же самое, что 0.6. Класс opacity-0 делает элемент невидимым (место он при этом занимает), а opacity-100 — полностью видимым, как по умолчанию. Подойдёт любое число от 0 до 100, например opacity-25 или opacity-80.

Не забывайте о разнице с цветом со слэшем, таким как bg-orange-500/50, из урока о цветах и тексте: слэш делает полупрозрачным только этот один цвет. А opacity делает бледным весь элемент со всем, что в нём: текстом, фоном, рамкой, картинками и вложенными элементами.

bg-orange-500/50

bg-orange-500 opacity-50

Поскольку вложенные элементы бледнеют вместе с родителем, вложенный элемент не может быть менее прозрачным, чем родитель: opacity-100 на заголовке бледной карточки его не вернёт. Если что-то внутри должно остаться чётким, делайте бледными только остальные части.