블로그

May 11, 2023

CSS 필터 및 블렌드 모드를 사용하여 시각 효과를 만드는 방법

CSS 필터와 블렌드 모드는 놀라운 효과를 쉽게 적용할 수 있는 강력한 도구입니다.

CSS 필터 및 블렌드 모드는 복잡한 코드 없이 웹 페이지에 놀라운 시각 효과를 쉽게 적용할 수 있는 강력한 도구입니다.

CSS 필터 및 블렌드 모드를 사용하면 웹 페이지에 시각 효과를 쉽게 적용할 수 있습니다. 필터는 이미지 또는 기타 HTML 요소의 렌더링을 조정하는 데 사용되는 사전 정의된 CSS 함수 세트입니다. 블렌드 모드는 요소가 배경 또는 인접 요소와 어떻게 혼합되어야 하는지를 결정합니다.

다음을 사용하여 CSS 필터를 적용합니다.필터 속성과 적용된 효과 유형을 지정하는 속성입니다. 각 필터 속성은 CSS 변수 함수와 유사하게 작동하는 CSS 함수입니다. 필터가 스타일 요소에 얼마나 영향을 미치는지 지정하는 매개변수를 허용합니다.

HTML 요소의 스타일을 지정하는 데 사용할 수 있는 10가지 CSS 필터 기능이 있습니다.

이러한 필터를 개별적으로 또는 조합하여 사용하여 고유한 스타일을 만들고 HTML 요소의 모양을 향상시킬 수 있습니다.

이러한 필터 중 일부는 올바른 방법으로 사용하면 다른 필터와 훨씬 더 잘 작동합니다.

다음은 이미지 요소에 다양한 시각적 효과를 얻기 위해 CSS 필터를 결합하는 예입니다.

그만큼회색조() 필터는 이미지나 텍스트 요소에서 모든 색상 정보를 제거합니다. 필터는 0과 1 사이의 값을 취하며, 0은 원래 색상을 의미하고 1은 전체 회색조 효과를 의미합니다.

그만큼세피아() 필터는 이미지나 텍스트 요소에 세피아톤 효과를 적용합니다. 필터는 또한 0과 1 사이의 값을 취합니다.

예를 들어:

결합회색조()14%에서세피아()30%에서는 이미지에 빈티지 또는 복고풍 효과를 만들 수 있습니다.

그만큼가득한() 필터는 이미지나 텍스트 요소의 채도를 높이거나 낮춥니다. 필터는 0과 무한대 사이의 값을 사용하며, 1은 원래 색상이고 값이 높을수록 채도가 증가합니다.

그만큼거꾸로 하다() 필터는 색상환에 존재하는 모든 색상의 색조를 180도 뒤집어 이미지나 텍스트 요소의 색상을 반전시킵니다. 이는 필터가 색상을 유지하면서 요소의 밝기와 채도 수준을 변경한다는 것을 의미합니다.

예를 들어:

이 코드는 이미지의 색상을 반전시키고 채도를 75% 증가시킵니다.

그만큼색조 회전() 필터는 이미지나 텍스트 요소의 색상을 회전합니다. 즉, 밝기와 채도 수준을 유지하면서 요소의 전체 색상을 변경합니다. 회전 정도는 각도 단위로 지정할 수 있으며, 0은 원래 색상을 나타내고 360은 원래 색상으로의 전체 회전을 나타냅니다.

결합색조 회전()그리고차이()필터는 이미지에 생생하고 다채로운 효과를 만들 수 있습니다.

예를 들어:

Hue-rotate는 다음 값을 수용할 수 있습니다.정도,졸업생,라드, 또는회전하다 . 위의 코드는 이미지의 색상을 10도 회전시키고 대비를 높입니다.

밝기 및 흐림 필터는 설명이 매우 필요합니다. 첫 번째는 이미지의 밝기를 조정하고 후자는 적용되는 흐림 수준을 제어합니다.

결합명도()그리고흐림()필터는 이미지에 몽환적이고 부드러운 효과를 줄 수 있습니다.

예를 들어:

위의 코드는 밝기를 다음과 같이 줄입니다.0.8 (80%)그리고5px이미지에 흐림 효과를 줍니다.

그림자 효과는 요소가 뒤에 있는 표면에 그림자를 드리워 깊이와 입체감을 주는 시각적 효과입니다. 요소와 배경 사이의 분리감을 만들기 위해 텍스트나 이미지에 그림자를 적용하는 경우가 많습니다.

한편 불투명 필터는 요소의 투명도를 제어합니다.

결합그림자()그리고불투명()필터는 텍스트 요소에 미묘한 효과를 만들 수 있습니다.