여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 효과
w3.css – 효과
3개월전 작성
4개월전 수정

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 및 이전 버전에서는 지원되지 않는다.

호버 효과

호버/마우스 오버에 특수 효과를 추가할 수도 있다.

Norway

w3-hover-opacity

Norway

w3-hover-grayscale

Norway

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>
참고
Mingg`s Diary
밍구
공부 목적 블로그