CSS3의 필터에 대한 연구 노트(정적 필터 및 동적 필터)

이 섹션에서는 정적 필터와 동적 필터를 사용하는 방법을 포함하여 CSS의 필터를 소개합니다. 이해하지 못하는 친구는 다음을 참조하세요.

1. CSS 정적 필터 스타일 (필터) (IE4.0 이상에서만 지원)

CSS 정적 필터 스타일 사용 방법: { filter : filtername( 매개변수1, 매개변수2 , .. .) }

필터 스타일 간략 설명 지원되는 매개변수

alpha: 이미지 또는 텍스트의 opacity,finishOpacity, style, startX, startY,finishX,finishY, 추가, 방향, 강도

blur: 지정된 방향과 위치에서 동적 흐림 효과를 생성합니다. add, 방향, 강도

chroma: 선택한 색상을 투명하게 만듭니다. color

dropShadow: 지정된 방향과 위치에 그림자를 생성합니다. color, offX, offY, positive

flipH: 개체를 가로 방향으로 뒤집습니다

flipV: 개체를 세로 방향으로 뒤집습니다.

glow: 개체 주위에 빛나는 색상 및 강도

gray: 개체를 회색조로 처리합니다.

invert: 객체 색상 반전

light: 객체의 조명 시뮬레이션

mask: 객체에 마스크 색상 생성

shadow: 그림자 색상 생성, 객체 가장자리 방향

wave: 사인 파형 생성 add, freq, lightStrength, 위상, 수직 방향 강도

xray: 객체의 색상 농도를 변경하고 흑백 이미지를 그립니다

위는 정적 필터의 전체 내용입니다. CSS는 대소문자를 구분합니다.

2. CSS 동적 필터

동적 필터는 페이지에 움직이는 페이드인 및 페이드아웃 효과를 추가할 수 있습니다. 두 가지 유형의 블렌드 앤 공개가 있으며 전자는 객체를 점차 사라지거나 나타나게 할 수 있으며 후자는 24가지 이미지 변환 효과를 제공합니다. 동적 필터 호출의 경우 정적 필터에서 정의해야 하는 필터 유형, 매개변수 외에 스크립트 언어를 사용하여 상태를 제어하기도 합니다.

우선 다이나믹 효과를 시작하기 전에 다이나믹 효과를 적용(Apply)한 후 재생(Play)해야 하며, 다이나믹 효과가 진행되는 동안에도 다이나믹 효과를 중단(Stop)할 수 있습니다. . 다음 메소드 구현을 사용할 수 있습니다.

개체 이름.filters(필터 값).Apply()
개체 이름.filters(필터 값).Play()
개체 이름.filters( 필터 값) .Stop()

필터의 상태는 "객체 이름.filters(필터 값).status"로 판단할 수 있습니다. 값이 0이면 필터가 실행되지 않았음을 의미합니다. 1이면 필터가 실행되지 않았음을 의미하며, 2이면 필터가 실행 중임을 의미합니다.

위에서 언급한 것처럼 필터를 정의할 때 혼합("filter:blendTrans(duration=time value)", 기간은 필터 실행에 필요한 시간(초)을 나타냄) 및 표시( "filter: RevealTrans(기간=시간값, 전환=전환 유형)", 전환 유형은 0에서 23 사이의 값입니다.

필터는 아직 W3C에서 공식적으로 인정되지 않습니다. 필터는 Microsoft IE 브라우저의 일부일 뿐이며 Netscape 브라우저에서는 사용할 수 없습니다. 관련 표준을 제정하는 기관에서도 이에 대해 논의하고 있으나 아직 최종 결론은 내리지 못했다. 제 생각에는 필터는 훌륭한 영상을 만드는 데 있어 정말 재미있고 필수적인 부분입니다. 필터를 사용하면 동일한 효과를 얻기 위해 거대한 텍스트 비트맵을 먼저 만들지 않고도 환상적인

시각적 디자인을 만들 때 대역폭을 절약하고 텍스트 서식을 사용할 수 있습니다.

그러나 이러한 기능은 아직 HTML의 공식적인 부분이 아니기 때문에 모든 브라우저에서 이러한 기능을 볼 수 있는 것은 아닙니다. 때로는 전통적인 방식으로 동일한 효과를 생성하는 것을 고려해야 하며, 물론 웹 페이지에 거대한 GIF 파일을 계속 채워 넣어야 합니다.
침묵...침묵...

3. CSS 필터 상세 설명

구문:

STYLE="filter:filtername(fparameter1, fparameter2...)"

(Filtername은 필터의 이름, fparameter1, fparameter2 등은 필터의 매개변수입니다.)

필터 설명:

alpha : 투명도 설정
blur: 고속으로 움직이는 효과, 즉 흐림 효과 만들기
chroma: 특수 색상을 투명하게 만듭니다
DropShadow: 개체의 고정된 그림자 만들기
FlipH: 수평 거울 이미지 만들기
FlipV: 수직 거울 이미지 만들기
빛: 근처 개체의 가장자리 외부에 빛 추가
회색: 이미지 회색조
반전: 색상 반전
빛: 객체에 광원 생성
mask: 투명한 마스크 생성 객체에 멤브레인
shadow: 오프셋 고정 그림자 생성
wave: 파급 효과
Xray: 객체가 조명을 받는 것처럼 보이게 만듭니다. by x-rays

1. 필터: 알파

구문:

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, 스타일=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY =finishY)"

지침:
불투명도: 시작 값(0~100 범위), 0은 투명, 100은 원본 이미지입니다.
FinishOpacity: 목표값.
스타일: 1, 2 또는 3
StartX: 모든 값
StartY: 모든 값

예: filter:Alpha(Opacity="0",FinishOpacity="75",Style= "2")

2. 필터: 흐림

구문:

STYLE="filter:Blur(추가 = 추가, 방향 = 방향, 강도 = 강도)"

설명:
추가: 일반적으로 1 또는 0입니다.
방향: 각도, 0~315도, 단계 크기는 45도입니다.
강도: 효과 증가 값은 일반적으로 5이면 충분합니다.

예: 필터:Blur(Add="1",Direction="45",Strength="5")

3. 필터: 크로마

구문:

STYLE="filter:Chroma(Color = color)"

설명: 색상: #rrggbb 형식, 임의.

예: 필터:Chroma(Color="#FFFFFF")

4. 필터: DropShadow

구문:

STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=긍정)"

설명:

색상:#rrggbb 형식, 모두.
Offx: X축 편차 값입니다.
Offy: Y축 오프셋 값입니다.
양수: 1 또는 0.

예:

filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5. 필터: FlipH

구문:

STYLE="filter:FlipH"

예: 필터:FlipH

6. 필터: FlipV

구문: STYLE="filter:FlipV"

예: 필터:FlipV

7. 필터: 글로우

구문: STYLE="filter:Glow(Color=color, Strength=strength)"

지침:
색상: 글로우 컬러 .
강도: 강도(0-100)

예: 필터:Glow(Color="#6699CC",Strength="5")

8.

구문: STYLE="filter:Gray"

예: filter:Gray

9. 필터: 반전

구문: STYLE="filter:Invert"

예: filter:Invert

10. 필터: 마스크

구문: STYLE=" filter:Mask(Color=color)"

예: filter:Mask (Color="#FFFFE0")

11. 필터: 그림자

구문: 필터:Shadow(색상=색상, 방향=방향)

설명:
색상: #rrggbb 형식.
방향: 각도, 0~315도, 단계 크기는 45도입니다.

예: 필터:Shadow(Color="#6699CC", Direction="135")

12. 필터: wave

구문: 필터: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)

설명:
Add: 일반적으로 1 또는 0입니다.
Freq: 변형 값.
LightStrength: 변형 비율.
위상: 각도 변형의 백분율입니다.
강도 : 변형강도.

예: 필터: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13. 필터: Xray

구문: STYLE="filter:Xray"

예: 필터: >