w3.css
효과
Normal
w3-opacity
w3-grayscale-max
w3-sepia-max
W3.CSS 효과 클래스
W3.CSS는 다음과 같은 효과 클래스를 제공한다.
| Class | Defines |
|---|---|
| w3-opacity | 요소에 불투명도/투명도를 추가한다(불투명도: 0.6). |
| w3-opacity-min | 요소에 불투명도/투명도를 추가한다(불투명도: 0.75). |
| w3-opacity-max | 요소에 불투명도/투명도를 추가한다(불투명도: 0.25). |
| w3-grayscale | 요소에 회색조 효과를 추가한다(회색조: 75%). |
| w3-grayscale-min | 요소에 회색조 효과를 추가한다(회색조: 50%). |
| w3-grayscale-max | 요소에 회색조 효과를 추가한다(회색조: 100%). |
| w3-sepia | 요소에 세피아 효과를 추가한다(세피아: 75%). |
| w3-sepia-min | 요소에 세피아 효과를 추가한다. (세피아: 50%) |
| w3-sepia-max | 요소에 세피아 효과를 추가한다. (세피아: 100%) |
| w3-hover-opacity | 마우스 오버 시 요소에 투명도를 추가한다(불투명도: 0.6). |
| w3-hover-grayscale | 마우스를 올리면 요소에 회색조 효과를 추가한다(회색조: 100%). |
| w3-hover-sepia | 마우스를 올리면 요소에 세피아 효과를 추가한다. |
불투명
w3-opacity 클래스는 요소에 투명도를 추가한다.
Normal
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">
그레이스케일
w3-grayscale 클래스는 요소에 회색조 효과를 추가한다.
Normal
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 및 이전 버전에서는 지원되지 않는다.
세피아
w3-sepia 클래스는 요소에 세피아 효과를 추가한다.
Normal
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-opacity가 포함된 w3-hover-red
예제
<div class="w3-border w3-hover-opacity w3-hover-red"> <p>w3-hover-red with w3-hover-opacity</p> </div>
참고
W3C School - W3.CSS Effects
공부 목적 블로그