Прозрачность
Утилиты для управления CSS-свойством opacity.
Классы
| Класс | opacity |
|---|---|
op-0 | 0 (полностью прозрачный) |
op-1 | 0.1 |
op-2 | 0.2 |
op-3 | 0.3 |
op-4 | 0.4 |
op-5 | 0.5 (полупрозрачный) |
op-6 | 0.6 |
op-7 | 0.7 |
op-8 | 0.8 |
op-9 | 0.9 |
op-10 | 1.0 (полностью непрозрачный) |
Hover-состояния
| Класс | Эффект |
|---|---|
hover:op-0 | opacity: 0 при наведении |
hover:op-1 | opacity: 0.1 при наведении |
| … | … |
hover:op-10 | opacity: 1 при наведении |
Примеры
html
<!-- Полупрозрачный оверлей -->
<div class="op-5 bg-black">Полупрозрачный фон</div>
<!-- Отключённый вид -->
<button class="op-4" disabled>Недоступна</button>
<!-- Эффект при наведении -->
<img class="op-10 hover:op-7" src="photo.jpg" alt="фото" />
<!-- Плавное появление -->
<div class="op-0 hover:op-10" style="transition: opacity 0.3s">
Появляется при наведении
</div>