CSS 필터

필터 속성은 요소의 시각적 효과를 설정하는 데 사용됩니다.이 속성은 주로 이미지, 배경 및 프레임의 렌더링을 조정하는 데 사용됩니다.SVG 요소에서도 필터를 사용할 수 있습니다.
구문:

filter: none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|
url();

필터는 어떻게 작동합니까?

필터는 도대체 무엇을 합니까?가장 간단한 방법은 필터를 뒷처리 단계로 보는 것이다. 모든 페이지의 내용이 레이아웃되고 그려진 후에 필터는 신기한 일을 할 것이다.
브라우저가 웹 페이지를 불러올 때, 스타일을 적용하고, 레이아웃을 실행한 다음, 페이지를 보여 주어야 한다.필터는 모든 단계가 끝난 후에 페이지를 화면으로 복사하기 전에 시작합니다.
그들이 하는 일은 페이지를 보여주는 스냅샷을 비트맵 이미지로 하고 스냅샷의 픽셀에 대해 도형 마술을 한 다음에 원시 페이지 이미지의 맨 위에 결과를 그리는 것이다.(카메라 렌즈 앞에 놓인 필터처럼 바라보는 방식)
여기서 다음 속성에 대해 살펴보겠습니다.

모호

밝기

명암비

투영

그레이스케일

톤 회전

내장

불투명도

포화

오징어 먹

1. 흐릿하다

CSS 함수는 입력 이미지에 고스 모호를 적용합니다.
구문:
흐림(반지름)
반지름 값이 크면 더 많은 흐림이 생성됩니다.값이 0이면 입력이 변경되지 않습니다.보간 값의 빈 값은 0입니다.
예:
필터:흐림(5px);

2. 밝기

함수의 역할은 입력 이미지에 선형 곱셈기를 적용하여 더욱 밝거나 어두워 보일 수 있도록 하는 것이다.
구문:
밝기(수량)
100%보다 낮으면 이미지가 어두워지고 100%보다 높으면 이미지가 밝아집니다.값이 0%이면 완전히 검정색 이미지가 생성되고 값이 100%이면 입력이 변경되지 않습니다.보간 값의 빈 값은 1입니다.
예:
밝기(1)/* 영향 없음*/
밝기(150%)/* 50% 이상 밝기*/
밝기(0%)/* 올블랙*/

3. 대비

CSS 함수는 입력 이미지의 대비를 조정합니다.
구문:
명암비(수량)
금액은 숫자나 백분율로 지정할 수 있다.
100% 미만이면 명암비가 낮아지고 100% 이상이면 명암비가 증가합니다.
0% 값은 완전히 회색으로 이미지를 만들고 100% 값은 입력을 그대로 유지합니다.보간 값의 빈 값은 1입니다.
예:
필터:대비(1);//무변화
필터: 명암비(115%)//명암비 최대 15%
필터:대비(0);//완전 회색

4. 그림자를 던진다

CSS 함수는 입력 이미지에 그림자 효과를 적용합니다.SVG에도 섀도우를 적용할 수 있습니다.👻
구문:
투영(오프셋-x오프셋-y 흐림 반지름 확산 반지름 색상)
모호함과 확산 반경은 선택할 수 있다
희미한 반지름: 값이 클수록 그림자가 커지고 희미해진다.음수 값은 사용할 수 없습니다.
확산 반지름: 양수 값은 그림자를 확대하고 커지게 하고 음수 값은 그림자를 축소합니다.지정하지 않으면 기본값은 0이며 섀도우 크기는 가져온 이미지와 같습니다.
참고: 대부분의 브라우저는 반지름 확장을 지원하지 않으며 를 사용하면 효과가 렌더링되지 않습니다.
예:
필터:그림자(12px12px5px#1c8c9e);

5.그레이스케일

CSS 함수는 입력 이미지를 회색조로 변환하는 역할을 합니다.
구문:
회색조(수량)
금액은 숫자나 백분율일 수 있다.
100%의 값은 완전히 회색이고 0%의 값은 입력이 변하지 않습니다.
보간 값의 빈 값은 0입니다.
예:
그레이스케일(0)/* 비효과*/
그레이스케일(1)/* 전체 그레이스케일*/
그레이스케일(100%)/* 전체 그레이스케일*/

6. 톤 회전

CSS 함수는 요소와 해당 컨텐트의 색조를 회전시키는 역할을 합니다.
색상 회전은 이미지의 모든 색상의 색상을 이동합니다.그런데 왜 도 단위로?우리가 바퀴 도표에서 색을 선택할 때
이것은 색 바퀴입니다:

색상 회전을 사용하여 색상 바퀴에서 색상을 x도로 회전할 수 있습니다.360도는 완전한 회전을 형성하는데 이것은 어떠한 변화도 없다는 것을 의미한다.이 속성의 값은 마이너스 슬라이스에도 적용됩니다. 예를 들어 -90은 270과 같습니다.
주: 정도수는 시계 반대 방향으로 이동하고, 음도수는 시계 반대 방향으로 이동한다.
구문:
톤 회전(각도)
0도의 값은 입력을 변하지 않게 한다.
정색 회전 트레이드는 색조 값을 증가시키고 음의 회전은 색조 값을 낮춘다.보간 값의 빈 값은 0입니다.
예:
필터:톤 회전(0도)/*효과 없음*/
필터:색조 회전(5 바퀴)/*180도 회전*/
필터:색조 회전(405도)/* 45도 회전과 동일*/
필터:톤 회전(-90도);/*270도 회전과 동일*/

7. 거꾸로 놓기

CSS 함수는 입력 이미지의 색상 견본을 반전시킵니다.
구문:
거꾸로 (금액)
100%의 값은 완전히 반전되고 0%의 값은 입력이 변하지 않습니다.0%에서 100% 사이의 값은 효과에 대한 선형 승수입니다.보간 값의 빈 값은 0입니다.
예:
필터:반전(0)/*효과 없음*/
필터:뒤로(100%)/* 완전히 뒤로*/

8.불투명도

CSS 함수는 가져온 이미지의 견본에 투명도를 적용합니다.
구문:
불투명도(수량)
0%의 값은 완전히 투명하며 100%의 값은 입력이 변하지 않습니다.0%에서 100% 사이의 값은 효과에 대한 선형 승수입니다.보간 값의 빈 값은 1입니다.
예:
필터:불투명도(0%)/*완전 투명도*/
필터:불투명도 (1)/*효과 없음*/
필터:불투명도(30%);/*30% 투명*/

포화

CSS 함수는 입력 이미지를 초포화 또는 비포화 상태로 만듭니다.
구문:
포화(량)
100퍼센트 이하의 값은 그림을 포화시키고, 100% 이상의 값은 그림을 초포화시킨다.보간 값의 빈 값은 1입니다.
예:
필터:포화(0)/*완전 불포화*/
필터:포화(100%)/*효과 없음*/
필터:포화(200%)/*이중포화*/

10.짙은 갈색

CSS 함수의 역할은 입력 이미지를 짙은 갈색으로 변환하여 따뜻하고 노란색/갈색으로 보이게 하는 것이다.
구문:
오징어 먹(수량)
100%의 값은 완전히 갈색이고 0%의 값은 입력이 변하지 않는다.보간 값의 빈 값은 0입니다.
예:
오징어 먹(0)/*영향 없음*/
오징어묵(0.95)/*95%오징어묵*/
오징어 먹(100%)/*완전 오징어 먹*/
필터: 오징어 먹(70%);

다중 속성:

한 번에 여러 필터를 적용할 수도 있습니다.
하나의 필터 속성이 두 개 이상의 함수를 가지고 있을 때, 그 결과는 두 개 이상의 필터 속성이 각각 같은 함수에 적용될 때와 다르다
예:
필터: 톤 회전(-30도) 다크 브라운(75%) 명암비(150%) 채도(300%)
색조 회전(30도);

필터 속성 값이 순서대로 적용되는 것을 기억하십시오. 이것은 필터의 입력이 이전 필터의 출력이라는 것을 의미합니다.

성능 고려 사항

모든 웹 개발자들이 관심을 가지는 것은 웹 페이지나 응용 프로그램의 성능이다.CSS 필터는 강력한 시각적 효과 도구이지만 웹 사이트의 성능에 영향을 미칠 수 있습니다.
우선, 모든 필터가 평등하게 만들어진 것은 아니다.대부분의 필터는 어떤 플랫폼에서든 매우 빨리 실행되며 성능에 미치는 영향은 매우 적다.
예:
'모호함' 을 할 때, 픽셀 주위의 픽셀 색을 혼합해서 모호한 결과를 낼 수 있습니다.따라서 반지름 매개변수가 2라고 가정하면 필터는 출력 픽셀 주위의 각 방향에서 블렌드 색상을 생성하기 위해 2개의 픽셀을 관찰해야 합니다.이것은 모든 출력 픽셀에서 발생하기 때문에, 이것은 당신이 반경을 늘릴 때 대량의 계산이 더욱 커진다는 것을 의미한다.'모호함'은 방향마다 나타나기 때문에'반경'을 배로 늘리는 것은 4배의 픽셀을 봐야 한다는 것을 의미하기 때문에 사실상'반경'을 배로 늘릴 때마다 속도가 4배 늦어진다.'drop shadow'필터는 효과의 일부분으로'blur'를 포함하기 때문에'shadow'인자의'radius'와'spread'부분을 변경할 때'blur'와 유사하게 행동합니다.

참조:

https://developer.mozilla.org/en-US/docs/Web/CSS/filter
https://www.html5rocks.com/en/tutorials/filters/understanding-css/
나는 codepen에 코드를 추가했다.
본문 읽어주셔서 감사합니다.♥️
나는 네가 이 문장을 좋아하길 바란다.만약 당신에게 어떤 문제가 있으면 언제든지 저에게 알려주세요😋
🌟
👩🏻‍💻 Suprabha.me
🌟