집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 필터의 창의적 힘을 탐색하고 블렌딩합니다

CSS 필터의 창의적 힘을 탐색하고 블렌딩합니다

Joseph Gordon-Levitt원래의: 2025-02-08 08:48:10767검색

CSS 필터 및 블렌딩 모드 : 웹 시각 효과를 향상시키는 강력한 도구

코어 포인트 Exploring the Creative Power of CSS Filters and Blending

CSS 필터는 그레이 스케일, 블러, 대비, 밝기 및 황갈색과 같은 다양한 시각 효과를 제공하여 웹 페이지 컨텐츠의 시각적 매력을 향상시키고 복잡한 효과를 달성 할 수 있습니다. CSS 블렌드 모드를 사용하면 요소 간의 시각적 상호 작용이있어 놀라운 효과를 만듭니다. 일반적으로 사용되는 블렌딩 모드에는 양의 스태킹, 컬러 필터링, 오버레이, 차이 및 제외 등이 포함됩니다. 다른 방식으로 겹치는 요소의 색상 값을 처리합니다. 필터 및 블렌드 모드를 사용할 때는 접근성 및 브라우저 호환성을 고려해야합니다. 충분한 색상 대비, 텍스트 선명도, 이미지 대체 텍스트 및 반응 형 디자인은 컨텐츠를 사용할 수 있고 광범위한 사용자 그룹에 대해 이해하기 쉽도록 핵심입니다.

CSS 필터 및 블렌딩 모드를 사용하는 일반적인 실수에는 필터의 과도한 사용, 사용자 상호 작용을 고려하지 않고 대화식 요소에 필터를 적용하며 복잡한 필터 또는 조합의 성능 영향을 무시합니다. 사용 균형 사용 및 명확성 우선 순위는 이러한 함정을 피할 수 있습니다.

CSS 필터에서 배우십시오 CSS 필터는 웹 요소에 시각적 효과를 적용하는 방법을 제공합니다. 이러한 효과는 간단한 조정 (예 : 이미지의 밝기 또는 대비 변경)에서보다 복잡한 변환 (예 : 흐릿하거나 황갈색 톤 추가)에 이르기까지 다양합니다.

일반적으로 사용되는 일부 CSS 필터에 뛰어 들어 웹 컨텐츠의 시각적 매력을 향상시키는 방법을 살펴 보겠습니다.

> 1. 그레이 스케일 필터는 색상을 회색조 스케일 그림자로 변환하여 이미지에 단색적이고 클래식 한 모양을 제공합니다. 백분율을 지정하여 효과의 강도를 제어 할 수 있습니다.

컨테이너에

를 추가함으로써 를 추가하면 브라우저에 이미지를 포함 하여이 컨테이너 내의 모든 것에 그레이 스케일 효과를 적용하도록 지시합니다. 결과적으로 컨테이너에 표시된 이미지는 원래 색상 대신 회색조 표시로 표시됩니다.

속성을 로 설정함으로써 이미지를 최대 강도로 그레이 스케일로 변환하려고합니다.

코드 펜 예

> 2. 퍼지 필터는 부드럽고 초점을 맞지 않는 효과를 만듭니다. 이것은 우리가 약화시키고 싶은 배경 이미지 또는 요소에 특히 유용합니다.

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

여기서, 우리는 브라우저에 이미지를 포함 하여이 컨테이너 내부의 모든 것에 블러 필터를 적용하도록 지시합니다. 결과적으로, 컨테이너에 표시된 이미지는 마치 약간 흐릿한 것처럼 부드러운 초점 효과를 갖습니다. 를 설정함으로써 5 픽셀 블러 반경으로 이미지에 블러 효과를 적용하고 싶다는 것을 나타냅니다.

코드 펜 예 blur(5px) > 3

필터는 요소의 밝고 어두운 영역의 차이를 향상 시키거나 감소시켜 시각적으로 더 시각적으로 눈길을 끄는 것입니다 :

여기서, 컨테이너의 이미지의 밝은 영역과 어두운 영역 사이의 대비가 증가하여 시각적으로 더 시각적으로 눈길을 끄는 것입니다. 로 설정함으로써 이미지의 대비를 150%늘리고 싶다고 말합니다. 코드 펜 예

> 4 필터는 요소의 전반적인 밝기를 제어합니다. 밝기가 증가하면 색상이 더 생생하게 만들 수 있지만 밝기가 줄어들면 부드럽거나 어두운 효과가 발생할 수 있습니다.

여기서는 컨테이너의 이미지의 전체 밝기가 조정됩니다. 그것을 로 설정함으로써, 우리는 이미지의 밝기를 20%증가시키고 싶다고 말합니다.

코드 펜 예

> 5. tan contrast()

필터는 요소가 따뜻한 황갈색 톤을 제공하여 향수 또는 복고풍 느낌을줍니다.

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

여기서 이미지에는 오래된 사진을 연상시키는 따뜻한 황갈색 톤이 제공됩니다.

로 설정한다는 것은 80% 강도의 이미지에 황갈색 효과를 적용하는 것을 의미합니다. 백분율 값을 조정하면 이미지에 적용되는 탄 효과의 강도를 제어 할 수 있습니다. contrast(150%) 코드 펜 예

CSS 필터 조합 CSS 필터의 장점 중 하나는 조합입니다. 복잡한 시각 효과를 달성하기 위해 여러 필터를 적용 할 수 있습니다.

여기서, 우리는 복합 시각 효과를 달성하기 위해 컨테이너 내의 요소에 여러 필터를 적용합니다. 여러 필터가 속성 값의 공간으로 분리됩니다. 각 필터는 지정된 순서로 왼쪽에서 오른쪽으로 적용됩니다. 필터는 요소의 색상을 30%의 강도로 회색조 그림자로 변환합니다.

필터는 3 픽셀 블러가 방사형 요소로 블러 효과를 추가합니다.

필터는 요소의 대비를 150%증가시킵니다. brightness()

이러한 필터를 결합하여 웹 컨텐츠의 모양을 향상시키는 복잡한 시각 효과를 달성 할 수 있습니다. 각 필터의 매개 변수를 조정하면 디자인 환경 설정에 맞게 신체 효과를 마이크로 조정 할 수 있습니다.

<code class="language-css">.image-container {
  filter: blur(5px);
}</code>

이 예에서 이 요소는 미묘한 회색조 효과, 약간 흐릿하고 대비가 높아서 독특하고 예술적인 모습을 가져옵니다.

코드 펜 예 brightness(120%) 더 많은 필터 당신은 ,

, , ,

및 를 포함한 더 많은 CSS 필터를 시도 할 수 있습니다. 반투명 배경을 배경 이미지와 함께 혼합하는 속성도 있습니다.

MDN에서 이러한 기능에 대해 자세히 알아볼 수 있습니다. (여기에 mdn 링크를 삽입해야합니다) CSS 하이브리드 모드의 전력을 사용하십시오 CSS 블렌드 모드를 사용하면 요소가 시각적으로 상호 작용할 수있어 전통적인 z 축 스태킹 이상의 효과가 발생할 수 있습니다. 블렌드 모드는 겹치는 요소의 색상 값을 처리하여 놀라운 결과를 낳습니다. 일반적으로 사용되는 하이브리드 모드를 탐색하고 구현 방법을 배우겠습니다. drop-shadow() > 1. 메인 필름이 쌓인 hue-rotate() 블렌딩 모드는 겹치는 요소의 색상 값을 "곱"하여 결합합니다. 상단 레이어의 각 픽셀의 RGB (빨간색, 녹색, 파란색) 값을 하단 레이어의 해당 픽셀로 곱하여 어두운 블렌드를 만듭니다. 이렇게하면 공통 영역이 어두워지고 각 레이어의 고유 한 색상이 여전히 보이는 블렌드가 생성됩니다. invert() 코드 펜 예 opacity() > 2. 컬러 필터 CSS의 블렌드 모드는 요소의 색상이 기본 요소의 색상과 어떻게 혼합되는지를 결정합니다. 특히 상단 레이어의 색상을 밝게하고 더 밝은 블렌드를 생성합니다. saturate() 다음은 혼합 모드가 작동하는 방법입니다 backdrop-filter <:> 색상 계산 : 최상층의 각 픽셀에 대해 RGB (빨간색, 녹색, 파란색) 값이 반전됩니다.

그런 다음 바닥 레이어에서 해당 RGB 값에 거꾸로 된 색상 값을 곱하십시오.

결과 : 결과는 층의 공통 영역이 더 밝아지는 혼합으로 밝은 효과를 얻습니다.

상단 층이 더 포화 될수록 효과가 강해집니다.

multiply 코드 펜 예

> 3. 오버레이

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

css의 블렌드 모드는 와

블렌드 모드를 결합하여 풍부하고 대조적 인 비주얼을 생성합니다. 혼합 모드가 작동하는 방법은 다음과 같습니다 <:> 색상 계산 : 기본 (b)의 색상이 0.5보다 밝은 경우, 결과는 식 2 b

t를 사용하여 계산되며, 여기서 b는 기본 색상이고 t는 상단 색상입니다.

기본 색상이 0.5와 같거나 더 어두운 경우, 결과는 식 1-2

(1- b) screen

결과 : 블렌드 모드는 어두운 색상에서 모드의 어두운 영향과 밝은 색상에서 모드의 밝게 효과를 결합합니다. screen 결과는 대비와 채도를 향상시키는 혼합입니다. 어두운 영역이 어두워지고 밝은 영역이 밝아지면 시각적으로 눈에 띄는 효과가 생깁니다.

- 코드 펜 예
,
,
- .

위 내용은 CSS 필터의 창의적 힘을 탐색하고 블렌딩합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css Filter 堆

성명：

이전 기사：HTML 이메일을 코딩하기위한 필수 팁과 요령다음 기사：HTML 이메일을 코딩하기위한 필수 팁과 요령

CSS 필터의 창의적 힘을 탐색하고 블렌딩합니다

여기서는 컨테이너의 이미지의 전체 밝기가 조정됩니다. 그것을 로 설정함으로써, 우리는 이미지의 밝기를 20%증가시키고 싶다고 말합니다.

필터는 3 픽셀 블러가 방사형 요소로 블러 효과를 추가합니다.

, , ,

기본 색상이 0.5와 같거나 더 어두운 경우, 결과는 식 1-2

블렌드 모드는 각 픽셀의 상단 색과 하단 색상 값의 절대적인 차이를 계산합니다. 겹치는 요소 간의 색상 차이를 강조하여 대비 효과가 높습니다. 혼합 모드가 작동하는 방법은 다음과 같습니다

필터는 대화 형 요소의 모양을 변경하여 사용자의 목적에 대한 이해에 영향을 줄 수 있습니다. 필터가 대화식 요소의 선명도와 유용성에 영향을 미치지 않도록하십시오.

관련 기사