CSS3 필터의 다양한 특수 효과

css3의 다양한 필터 특수 효과

css3의 필터 속성은 간단하고 사용하기 쉽고 강력하다고 할 수 있습니다. 이러한 효과는 이미지에 적용되어 특수 효과를 얻을 수도 있습니다. 비디오로, 여기서는 그림 효과에 대해 논의합니다.)

브라우저 호환성

현재 주요 브라우저와 CSS3의 호환성은 매우 좋습니다. IE9 이하의 이전 버전에서는 아직 지원하지 않습니다. 요점은 Microsoft가 이러한 오래된 골동품을 포기할 준비가 되어 있다는 것입니다. 또한 IE 필터도 사용할 수 있으며 이에 대해서는 별도로 설명합니다.

현재 사양에서 지원되는 효과는 다음과 같습니다.

회색조 값은 0-1 사이의 십진수입니다.

세피아 값은 0-1 사이의 십진수입니다.

saturate 채도 값은 num

hue-rotate 색상 회전 값은 angle

invert 값은 0~1 사이의 소수입니다.

opacity 투명도 값은 0-1 사이의 십진수

밝기 값은 0-1 사이의 십진수

대비 대비 값은 num

blur 값은 길이

drop-shadow Shadow

사용법은 다음과 같은 표준 CSS 작성 방법입니다.

-webkit-filter: Blur(2px);

테스트 브라우저는 다음과 같습니다. 크롬 브라우저 버전 44.0 기준, 샘플 이미지 상단이 원본 이미지, 하단이 FIFTER 효과를 추가한 이미지입니다.

grayscale

이 효과 매개변수에 값이 없으면 0~1 사이의 값이 다른 greyscale로 렌더링됩니다. 다음 예는 100% 렌더링입니다. -webkit-filter:grayscale(1); 향수 기능의 효과, 값도 0-1, -webkit-filter:sepia(1);

채도

이 속성은 이미지의 채도를 변경합니다. 값 범위는 숫자일 수 있습니다. 예는 800%입니다. (6);

hue-rotate 색조 회전

hue-rotate는 이미지의 색조를 변경하는 데 사용됩니다. 기본값은 0deg입니다. 값은 각도입니다. 예: -webkit-filter:hue-rotate(180deg)

반전 색상

반전 효과는 이와 다소 유사합니다. 예: -webkit-filter:invert(1)

불투명도

이 속성은 자주 사용됩니다. 예: -webkit- 필터:불투명도(0.3)

밝기 밝기

변경 이미지의 밝기, 기본값은 100%입니다. 예: -webkit-filter: 밝기(0.5)

대비 대비

이 속성 값 및 채도 채도와 유사하며 예: 500%: -webkit-filter:contrast(5)

blur

이 속성은 이미지의 선명도를 변경합니다. 기본값은 0입니다. 예: -webkit-filter:blur(1px)

drop-shadow Shadow

이는 box-shadow와 유사하며 그림에 그림자를 추가합니다. 예: -webkit-filter:drop-shadow(10px 10px 10px #000)

물론 여러 속성을 추가하는 것도 가능합니다. 예: -webkit-filter:saturate(10)hue-rotate(500deg) greyscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) 밝기(1.2 );