W3.CSS Эффекты
Обычно
w3-opacity
w3-grayscale-max
w3-sepia-max
W3.CSS Классы эффектов
W3.CSS предоставляет следующие классы эффектов:
| Класс | Определяет |
|---|---|
| w3-opacity | Добавляет непрозрачность/прозрачность к элементу (opacity: 0.6) |
| w3-opacity-min | Добавляет непрозрачность/прозрачность к элементу (opacity: 0.75) |
| w3-opacity-max | Добавляет непрозрачность/прозрачность к элементу (opacity: 0.25) |
| w3-grayscale | Добавляет эффект серого к элементу (grayscale: 75%) |
| w3-grayscale-min | Добавляет эффект серого к элементу (grayscale: 50%) |
| w3-grayscale-max | Добавляет эффект серого к элементу (grayscale: 100%) |
| w3-sepia | Добавляет эффект сепии к элементу (sepia: 75%) |
| w3-sepia-min | Добавляет эффект сепии к элементу (sepia: 50%) |
| w3-sepia-max | Добавляет эффект сепии к элементу (sepia: 100%) |
| w3-hover-opacity | Добавляет прозрачность элементу при наведении (opacity: 0.6) |
| w3-hover-grayscale | Добавляет эффект оттенков серого к элементу при наведении (grayscale: 100%) |
| w3-hover-sepia | Добавляет эффект сепии к элементу при наведении |
Непрозрачность / Opacity
Классы w3-opacity добавляют прозрачность элементу:
Обычно
w3-opacity-min
w3-opacity
w3-opacity-max
Пример
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
Попробуйте сами »
Оттенки серого / Grayscale
Классы w3-grayscale добавляют эффект оттенков серого к элементу:
Обычно
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Пример
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
Попробуйте сами »
Примечание: Классы w3-grayscale не поддерживаются в IE 11 и более ранних версиях.
Сепия / Sepia
Классы w3-sepia добавляют эффект сепии к элементу:
Обычно
w3-sepia-min
w3-sepia
w3-sepia-max
Пример
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
Попробуйте сами »
Примечание: Классы w3-sepia не поддерживаются в IE 11 и более ранних версиях.
Эффекты при наведении
Вы также можете добавить специальные эффекты при наведении курсора мыши.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Пример
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
Попробуйте сами »
Цвет прозрачности при наведении
Вы также можете комбинировать любые классы w3-hover-color с w3-hover-opacity, чтобы создать немного "более светлый" цвет фона при наведении:
w3-hover-red
w3-hover-red with w3-hover-opacity
Пример
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>
Попробуйте сами »
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
