W3.CSS Ефекти
Normal
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>
Спробуйте самі »
