W3.CSS Ефекти
![Ефекти зображень в HTML](../images/img_workshop.jpg)
Normal
![Ефекти зображень в HTML](../images/img_workshop.jpg)
w3-opacity
![Ефекти зображень в HTML](../images/img_workshop.jpg)
w3-grayscale-max
![Ефекти зображень в HTML](../images/img_workshop.jpg)
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 додають елементу прозорість:
![Непрозорість зображення](../images/img_workshop.jpg)
Звичайна
![Непрозорість зображення](../images/img_workshop.jpg)
w3-opacity-min
![Непрозорість зображення](../images/img_workshop.jpg)
w3-opacity
![Непрозорість зображення](../images/img_workshop.jpg)
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 додають елементу ефект градацій сірого:
![Градації сірого зображення](../images/img_workshop.jpg)
Звичайна
![Градації сірого зображення](../images/img_workshop.jpg)
w3-grayscale-min
![Градації сірого зображення](../images/img_workshop.jpg)
w3-grayscale
![Градації сірого зображення](../images/img_workshop.jpg)
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 додають ефект сепії до елемента:
![Ефект сепії зображення](../images/img_workshop.jpg)
Звичайна
![Ефект сепії зображення](../images/img_workshop.jpg)
w3-sepia-min
![Ефект сепії зображення](../images/img_workshop.jpg)
w3-sepia
![Ефект сепії зображення](../images/img_workshop.jpg)
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 і попередніх версіях.
Ефекти наведення курсора
Ви також можете додати спеціальні ефекти під час наведення курсора.
![Ефект наведення курсора на зображення](../images/streetart2.jpg)
w3-hover-opacity
![Ефект наведення курсора на зображення](../images/streetart2.jpg)
w3-hover-grayscale
![Ефект наведення курсора на зображення](../images/streetart2.jpg)
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>
Спробуйте самі »