CSS 필터의 창의적 힘을 탐색하고 블렌딩합니다-CSS 튜토리얼-php.cn

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

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

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

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

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

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

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

컨테이너에

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

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

코드 펜 예

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

<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>

로그인 후 복사

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

<🎜 🎜> <<> 코드 펜 예 blur(5px) <🎜 🎜> < > 3

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

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

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

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

<🎜 🎜> <<> 코드 펜 예

<🎜 🎜> < > 5. tan contrast()

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

.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}

로그인 후 복사

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

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

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

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

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

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

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

.image-container {
  filter: blur(5px);
}

로그인 후 복사

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

<🎜 🎜> <<> 코드 펜 예 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. 오버레이

<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>

로그인 후 복사

css의 블렌드 모드는 <🎜 🎜>와

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

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