조정 블렌드 모드 : '차이'및 '제외'

2020 년까지 블렌드 모드는 먼저 시도하지 않고 어떤 결과를 생산할 수 있는지 알지 못했기 때문에 많이 사용하지 않은 기능이었습니다. 그리고“시도하고 무슨 일이 일어나는지 확인하십시오”접근 방식은 화면에서 만들었던 시각적 구토에 항상 나를 놀라게하는 것처럼 보였습니다.

문제는 그들이 뒤에서 어떻게 작동하는지 알지 못하는 것에서 비롯되었습니다. 제가 주제에서 본 모든 기사는 예제, Photoshop과의 비교 또는 예술적 설명을 기반으로합니다. 나는 예를 잘 찾지 못하지만, 당신이 뒷면에서 일이 어떻게 작동하는지 전혀 모르겠다면, 멋진 데모를 머리 속에 가지고있는 다른 아이디어를 구현할 수있는 무언가에 적응하는 것은 실제로 시간이 많이 걸리고 실망스럽고 궁극적으로 헛된 모험이됩니다. 그런 다음 Photoshop 비교는 기술적 배경에서 온 사람에게는 거의 쓸모가 없습니다. 그리고 장악의 예술적 설명은 나에게 펭귄 언어처럼 느껴집니다.

그래서 나는 사양을 발견했을 때 전구 순간을 가졌고 그것이 혼합 모드가 작동하는 수학 공식도 포함되어 있음을 발견했습니다. 이것은이 물건이 뒷면에서 어떻게 작동하는지, 그것이 실제로 유용 할 수있는 곳을 이해할 수 있음을 의미했습니다. 그리고 이제 더 잘 알았 으므로이 지식을 일련의 기사에서 공유 할 것입니다.

오늘은 블렌딩이 일반적으로 작동하는 방식에 중점을두고 다소 유사한 두 개의 혼합 모드 (차이 및 제외)를 자세히 살펴보고, 마지막 으로이 기사의 고기를 방문하여 아래의 것과 같은 멋진 사용 사례를 분석 할 것입니다.

블렌드 모드의“어떻게”에 대해 논의합시다

블렌딩은 두 개의 레이어를 결합한 것을 의미하며 (하나는 다른 하나 위에 쌓여 있음) 단일 레이어를 얻는 것을 의미합니다. 이 두 층은 두 형제가 될 수 있으며,이 경우 우리가 사용하는 CSS 속성은 믹스 블렌드 모드입니다. 또한 두 개의 배경 레이어 일 수도 있으며,이 경우 우리가 사용하는 CSS 속성은 배경 블렌드 모드입니다. "형제 자매"를 혼합하는 것에 대해 이야기 할 때, 여기에는 유사 요소와 요소를 혼합하는 것이 텍스트 내용 또는 부모의 배경과 혼합됩니다. 그리고 배경 레이어와 관련하여, 내가 말하는 배경 이미지 레이어 일뿐 만 아니라 배경색도 레이어이기도합니다.

두 층을 혼합하면 상단의 층을 소스 라고하며 아래의 층을 대상 이라고합니다. 이것은이 이름이 적어도 나에게 큰 의미가 없기 때문에 내가 취하는 것입니다. 대상이 출력이 될 것으로 예상되지만 대신 입력과 결과 레이어가 출력입니다.

두 레이어를 정확히 결합하는 방법은 사용 된 특정 블렌드 모드에 따라 다르지만 항상 픽셀 당입니다. 예를 들어, 아래 그림은 Multiply Blend 모드를 사용하여 픽셀의 그리드로 표시되는 두 층을 결합합니다.

좋아,하지만 두 층 이상 이 있으면 어떻게됩니까? 이 경우 블렌딩 프로세스는 바닥에서 시작하여 단계에서 발생합니다.

첫 번째 단계에서 바닥의 두 번째 레이어는 우리의 소스이며, 하단의 첫 번째 레이어는 대상입니다. 이 두 층은 함께 혼합되고 결과는 두 번째 단계의 대상이되며, 여기서 바닥의 세 번째 층은 소스입니다. 첫 번째 두 가지를 혼합 한 결과와 세 번째 레이어를 혼합하면 세 번째 단계의 대상이 있습니다. 여기서 하단의 네 번째 레이어는 소스입니다.

물론 각 단계에서 다른 블렌드 모드를 사용할 수 있습니다. 예를 들어, 차이를 사용하여 처음 두 레이어를 바닥에서 혼합 한 다음 곱하기를 사용하여 결과를 바닥에서 세 번째 레이어와 블렌딩 할 수 있습니다. 그러나 이것은 우리가 향후 기사에서 조금 더 갈 수있는 것입니다.

우리가 여기서 논의하는 두 개의 블렌드 모드에 의해 생성 된 결과는 두 레이어 중 어느 것이 상단에 있는지에 따라 다릅니다. 이것은 가능한 모든 블렌드 모드의 경우는 아니지만이 기사에서보고있는 모드의 경우입니다.

또한 분리 가능한 블렌드 모드이므로 혼합 작업이 각 채널에서 개별적으로 수행됩니다. 다시 말하지만, 이것은 가능한 모든 블렌드 모드의 경우는 아니지만 차이와 제외의 경우입니다.

보다 정확하게, 결과적인 빨간색 채널은 소스의 빨간색 채널과 대상의 빨간색 채널에만 의존한다. 결과 녹색 채널은 소스의 녹색 채널과 목적지의 녹색 채널에만 의존합니다. 마지막으로, 결과적인 파란색 채널은 소스의 파란색 채널과 대상의 파란색 채널에만 의존합니다.

 R = F <sub>B</sub> (R <sub>S</sub> , R <sub>D</sub> )
G = F <sub>B</sub> (G <sub>S</sub> , G <sub>D</sub> )
B = F <sub>B</sub> (B <sub>S</sub> , B <sub>D</sub> )

일반 채널의 경우 빨간색, 녹색 또는 파란색인지 여부를 지정하지 않고 소스 (상단)와 대상 (하단) 레이어에서 두 개의 해당 채널의 함수입니다.

 ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> )

명심해야 할 것은 RGB 값이 [0, 255] 간격으로 표시 될 수 있다는 것입니다. 예를 들어, 크림슨은 RGB (220, 20, 60) 또는 RGB (86.3%, 7.8%, 23.5%)로 작성할 수 있습니다. 둘 다 유효합니다. 픽셀이 진홍색 인 경우 계산에 사용하는 채널 값은 소수점 값, 즉 .863, .078, .235로 표시되는 백분율입니다.

픽셀이 검은 색 인 경우, 검은 색은 RGB (0, 0, 0) 또는 RGB (0%, 0%, 0%)로 쓸 수 있기 때문에 계산에 사용하는 채널 값은 모두 0입니다. 픽셀이 흰색 인 경우, 우리가 계산에 사용하는 채널 값은 모두 1입니다. 흰색은 RGB (255, 255, 255) 또는 RGB (100%, 100%, 100%)로 쓸 수 있기 때문입니다.

우리가 완전한 투명성 (0과 같은 알파)을 가질 때는 그 결과는 다른 층과 동일합니다.

차이점

이 블렌드 모드의 이름은 블렌딩 함수 F _B ()가하는 일에 대한 단서를 제공 할 수 있습니다. 결과는 두 층에 대한 해당 채널 값의 차이의 절대 값입니다.

 ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> ) = | ch s -ch d |

우선, 이는 두 층의 해당 픽셀이 동일한 RGB 값을 갖는 경우 ( _예 : 세 채널 중 하나 _마다 ) 3 개의 채널의 차이가 0이기 때문에 결과 레이어의 픽셀이 검은 색이라는 것을 의미합니다.

 <sub>ch s</sub> = ch <sub>d</sub>
ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> ) = | ch <sub>s</sub> -ch <sub>d</sub> | = 0

둘째, 숫자가 변경되지 않은 양과 0 잎 사이의 차이의 절대 값은 변하지 않기 때문에 레이어 픽셀이 검은 색 인 경우 해당 결과 픽셀이 다른 레이어의 픽셀과 동일한 RGB 값을 갖습니다 (모든 채널은 0).

검은 색 픽셀이 상단 (소스) 레이어에 있으면 채널 값을 0으로 대체하면 다음이 제공됩니다.

 ch = f <sub>b</sub> (0, ch <sub>d</sub> ) = | 0 -CH <sub>D</sub> | = | -ch <sub>d</sub> | = Ch <sub>d</sub>

검은 색 픽셀이 하단 (대상) 레이어에 있으면 공식에서 채널 값을 0으로 대체합니다.

 ch = f <sub>b</sub> (ch <sub>s</sub> , 0) = | ch <sub>s</sub> -0 | = | ch <sub>s</sub> | = ch <sub>s</sub>

마지막으로, 긍정적 인 소지 적 숫자와 1 사이의 차이의 절대 값은 그 숫자의 보완을 제공하기 때문에 레이어의 픽셀이 흰색이면 (모든 채널 1), 해당 결과 픽셀은 다른 레이어의 픽셀이 완전히 반전 된 것으로 나타났습니다 (필터 (1)가 수행 할 수있는 것).

흰색 픽셀이 상단 (소스) 레이어에 있으면 채널 값을 1로 바꾸면 공식이 제공됩니다.

 ch = f <sub>b</sub> (1, ch <sub>d</sub> ) = | 1 -ch <sub>d</sub> | = 1 -CH <sub>d</sub>

흰색 픽셀이 하단 (대상) 레이어에 있으면 채널 값을 1로 바꾸면 공식이 제공됩니다.

 ch = f <sub>b</sub> (ch <sub>s</sub> , 1) = | ch <sub>s</sub> -1 | = 1 -ch <sub>s</sub>

이것은 아래의 대화 형 펜에서 작동하는 것으로 볼 수 있으며, 여기서 분리 된 층을 보는 것과 겹치고 혼합 된 층을 볼 수 있습니다. 겹치는 케이스에서 세 열을 호버링하면 각각의 상황이 나타납니다.

제외

우리가 오늘보고있는 두 번째 및 마지막 블렌드 모드의 경우 결과는 두 채널 값의 두 배입니다.

 ch = f <sub>b</sub> (ch <sub>s</sub> , ch <sub>d</sub> ) = ch s ch d -2 · ch s · ch d

두 값 모두 [0, 1] 간격이기 때문에 제품은 항상 가장 작은 제품과 동일하므로 제품의 두 배는 항상 합계와 동일합니다.

상단 (소스) 레이어에서 검은 색 픽셀을 고려한 다음 위의 공식에서 _chs를 0으로 바꾸면 해당 결과 픽셀 채널에 대해 다음과 같은 결과를 얻습니다.

 ch = f <sub>b</sub> (0, ch <sub>d</sub> ) = 0 ch <sub>d</sub> -2 · 0 · ch <sub>d</sub> = ch <sub>d</sub> -0 = ch <sub>d</sub>

하단 (대상) 레이어에서 검은 색 픽셀을 고려한 다음 위의 공식에서 ch _d를 0으로 바꾸면 해당 결과 픽셀 채널에 대해 다음과 같은 결과를 얻습니다.

 ch = f <sub>b</sub> (ch <sub>s</sub> , 0) = ch <sub>s</sub> 0-2 · ch <sub>s</sub> · 0 = ch <sub>s</sub> -0 = ch <sub>s</sub>

따라서 레이어 픽셀이 검은 색이면 해당 결과 픽셀이 다른 레이어의 픽셀과 동일합니다.

상단 (소스) 층의 흰색 픽셀을 고려한 다음 위의 공식에서 _chs를 1로 바꾸면 해당 결과 픽셀 채널에 대해 다음과 같은 결과를 얻습니다.

 ch = f <sub>b</sub> (1, ch <sub>d</sub> ) = 1 ch <sub>d</sub> -2 · 1 · ch <sub>d</sub> = 1 ch <sub>d</sub> -2 · ch <sub>d</sub> = 1 -CH <sub>D</sub>

하단 (대상) 층에서 흰색 픽셀을 고려한 다음 위의 공식에서 ch _d를 1로 바꾸면 해당 결과 픽셀 채널에 대해 다음과 같은 결과를 얻습니다.

 ch = f <sub>b</sub> (ch <sub>s</sub> , 1) = ch <sub>s</sub> 1-2 · ch <sub>s</sub> · 1 = ch <sub>s</sub> 1-2 · ch <sub>s</sub> = 1 -Ch <sub>s</sub>

따라서 레이어의 픽셀이 흰색 인 경우 해당 결과 픽셀이 다른 층의 픽셀과 동일합니다.

이것은 모두 다음 대화식 데모에 표시됩니다.

층 중 하나 이상이 흑백 픽셀 만있는 한 차이와 배제는 동일한 결과를 생성합니다.

이제 블렌드 모드의“무엇”으로 돌아가 봅시다

여기에 흥미로운 부분이 있습니다 - 예제!

텍스트 상태 변경 효과

링크가있는 단락이 있다고 가정 해 봅시다.

 <p> 안녕하세요, <a href="'#'"> world </a>! </p>

우리는 몇 가지 기본 스타일을 설정하여 텍스트를 화면 중간에 놓고 글꼴 크기를 올리고 신체에 배경을 설정하고 단락과 링크 모두에 색상을 설정합니다.

 몸 {
  디스플레이 : 그리드;
  장소-대륙 : 센터;
  높이 : 100VH;
  배경 : #222;
  색상 : #ddd;
  글꼴 크기 : 클램프 (1.25EM, 15VW, 7EM);
}

A {색상 : 금; }

지금까지 많이 보이지는 않지만 곧 바꿀 것입니다!

다음 단계는 전체 링크를 포괄하고 배경을 CurrentColor로 설정하는 절대적으로 배치 된 의사 요소를 작성하는 것입니다.

 A {
  위치 : 상대;
  색상 : 금;
  
  &::후에 {
    위치 : 절대;
    상단 : 0;
    하단 : 0;
    오른쪽 : 0;
    왼쪽 : 0;
    배경 : CurrentColor;
    콘텐츠: '';
  }
}

위의 것은 우리가 물건을 엉망으로 만든 것처럼 보이지만 우리는 정말로 우리가 있었습니까? 우리가 여기있는 것은 금 텍스트 위에 금 사각형입니다. 그리고 위에서 작업 한 두 블렌드 모드가 어떻게 논의 된 방식에주의를 기울 였다면, 아마도 다음에 무엇을 추측했을 것입니다. 우리는 차이를 사용하여 링크 내의 두 형제 노드 (의사 요소 사각형 및 텍스트 콘텐츠)를 차이를 사용하여 블렌딩하고, 둘 다 금이기 때문에 텍스트가 공통적으로 검은 색이됩니다.

 p {분리 : 분리; }

A {
  / * 이전과 동일 */
  
  &::후에 {
    / * 이전과 동일 */
    믹스 블렌드 모드 : 차이;
  }
}

신체 배경과의 혼합을 방지하려면 단락을 분리해야합니다. 이것은 Firefox에서 단지 문제 일뿐입니다 (그리고 우리는 신체에 매우 어두운 배경을 가지고 있다면 너무 눈에 띄지 않습니다) Chrome에서는 괜찮습니다. Spec에 따르면 Firefox가 실제로 정확하다는 점을 명심하십시오. 여기에서 버그가있는 방식으로 작동하는 것은 크롬이므로 버그가 고정 될 경우 격리 속성을 설정해야합니다.

좋아, 그러나 우리는 링크가 집중되거나 호버링 된 경우에만 이런 일이 발생하기를 원합니다. 그렇지 않으면 의사 요소가 보이지 않습니다.

 A {
  / * 이전과 동일 */
  텍스트 결정 : 없음;
  
  &::후에 {
    / * 이전과 동일 */
    변환 : 스케일 (0);
  }

  & : 초점 {개요 : 없음}
  & : focus, & : hover {& :: after {transform : none; }}
}

또한 링크 밑줄과 초점 개요를 제거했습니다. 아래에서는 다음과 같은 차이 효과를 볼 수 있습니다. 호버 (동일한 효과가 발생합니다 : 초점, 라이브 데모에서 테스트 할 수있는 것).

우리는 이제 우리의 상태 변화가 있지만 거칠어 보이므로 전환을 추가합시다!

 A {
  / * 이전과 동일 */
  
  &::후에 {
    / * 이전과 동일 */
    전환 : .25S 변환;
  }
}

훨씬 낫다!

우리의 의사가 중간에 아무것도 아니라 바닥의 얇은 선에서 자랐다면 더 좋아 보일 것입니다. 이것은 우리가 바닥 가장자리에 변환-오리핀을 설정해야한다는 것을 의미합니다 (수직 및 수평으로 100% 값으로)가 처음에 유사를 Y 축을 따라 아무것도없는 것으로 확장해야합니다.

 A {
  / * 이전과 동일 */
  
  &::후에 {
    / * 이전과 동일 */
    변환-오리진 : 0 100%;
    변환 : scaley (.05);
  }
}

내가 여기서하고 싶은 다른 일은 단락의 글꼴을보다 미적으로 매력적인 것으로 바꾸는 것입니다. 그러나 우리는 이제 다른 종류의 문제가 있습니다.

우리는 링크에 수평 패딩으로 이것을 고칠 수 있습니다.

 A {
  / * 이전과 동일 */
  패딩 : 0 .25EM;
}

패딩 오른쪽을 설정하는 대신 오른쪽과 왼쪽 모두 에이 패딩을 설정하는 이유가 궁금하다면 그 이유는 아래에 설명되어 있습니다. 우리의 링크 텍스트가 "외계인 세계"가되면, 왼쪽 왼쪽이 없다면 'A'의 곱슬 머리가 사각형 밖에서 끝날 것입니다.

위의 다중 단어 링크가있는이 데모는 뷰포트 너비를 줄일 때 또 다른 문제를 강조합니다.

여기에서 한 가지 빠른 수정은 디스플레이를 설정하는 것입니다 : 링크의 인라인 블록. 이것은 완벽한 솔루션이 아닙니다. 또한 링크 텍스트가 뷰포트 너비보다 길면 중단되지만이 경우에는 작동하므로 지금 여기에두면 잠시 후이 문제로 돌아올 것입니다.

이제 가벼운 테마의 상황을 고려해 봅시다. 링크 텍스트에 대해 검은 색 대신 흰색을 얻을 수있는 방법이 없기 때문에 호버 또는 : 흰색이 아닌 두 개의 동일한 하이라이트 레이어를 혼합하여 초점을 두어야합니다. 여기서는 약간 다른 접근 방식이 필요합니다.

이 경우 우리가하는 일은 먼저 배경, 일반 단락 텍스트 색상 및 링크 텍스트 색상을 원하는 값으로 설정하지만 반전 된 값 으로 설정하는 것입니다. 처음에는이 반전을 수동으로 수행했지만 Sass Invert () 함수를 사용한다는 제안을 받았는데, 이는 실제로 물건을 단순화하는 매우 멋진 아이디어입니다. 그런 다음 기본적으로 우리가 반전하려는 가벼운 테마 인이 어두운 테마를 가지고 있으면 CSS Invert () 필터 기능의 도움으로 모든 것을 다시 반전시켜 원하는 결과를 얻습니다.

여기에 작은 경고 : 필터를 설정할 수 없습니다 : 우리는 신체 또는 HTML 요소의 반전 (1)을 우리가 기대하는 방식으로 행동하지 않기 때문에 원하는 결과를 얻지 못하기 때문입니다. 그러나 우리는 단락 주변의 래퍼에 배경과 필터를 모두 설정할 수 있습니다.

 
  <p> 안녕하세요, <a href="'#'"> 외계인 세계 </a>! </p>
섹션>

 몸 {
  /* 이전과 동일하고 
     장소 컨텐츠, 배경 및 색상 선언이 없으면 
     우리는 섹션에서 움직입니다 */
}

부분 {
  디스플레이 : 그리드;
  장소-대륙 : 센터;
  배경 : 반전 (#ddd) / * sass invert (<coll>) 함수 * /;
  색상 : 반전 (#222); / * sass invert <color>) 함수 */;
  필터 : 반전 (1); / * CSS 필터 반전 () 함수 */
}

A {
  / * 이전과 동일 */
  색상 : 반전 (보라색); / * sass invert (<folor>) 함수 */
}</folor></color></coll>

다음은이 효과를 사용하는 내비게이션 바의 예입니다 (그리고 다른 영리한 트릭이 많이 있지만이 기사의 범위를 벗어납니다). 행동 중에서 볼 수있는 다른 옵션을 선택하십시오.

우리가 조심해야 할 다른 것은 다음과 같습니다.이 기술을 사용할 때 우리 섹션의 모든 후손이 반전됩니다. 그리고 이것은 아마도 IMG 요소의 경우에 우리가 원하는 것이 아닐 것입니다. 나는 어둠에서 빛 테마로 전환 할 때 블로그 게시물의 이미지를 반전 할 것으로 기대하지 않습니다. 결과적으로, 우리는 섹션의 모든 IMG 후손에 필터 반전을 뒤집어 야합니다.

 부분 {
  / * 이전과 동일 */
  
  &, & img {필터 : 반전 (1); }
}

아래 데모는 이미지와 함께 어둡고 밝은 테마 케이스를 모두 보여줍니다.

이제 랩핑 링크 텍스트 문제로 돌아와서 요소를 인라인 블록을 만드는 것보다 더 나은 옵션이 없는지 확인합시다.

글쎄, 우리는한다! 텍스트 내용과 의사를 혼합하는 대신 두 개의 배경 레이어를 혼합 할 수 있습니다. 한 층은 텍스트에 자르고, 다른 층은 테두리 박스에 자르고 수직 크기는 초기에 5%에서 호버링 된 초점을 맞춘 경우 100% 사이의 애니메이션을 연결합니다.

 A {
  / * 이전과 동일 */
  -webkit-text-fill-color : 투명;
     -Moz-Text-fill-Color : 투명;
  --full : linear-gradient (currentColor, CurrentColor);
  배경: 
    var (-전체), 
    var (-전체) 0 100%/1%var (-sy, 5%) 반복 -x;
  -webkit-background-clip : 텍스트, 테두리 박스;
          배경 클립 : 텍스트, 테두리 박스;
  배경 블렌드 모드 : 차이;
  전환 : 배경 크기 .25;
	
  & : 초점, & : 호버 {-sy : 100%; }
}

우리는 더 이상 의사 요소가 없으므로 CSS 중 일부를 가져 와서 링크 자체에 옮겨서이 새로운 기술에 맞게 조정했습니다. 믹스 블렌드 모드 사용에서 배경 블렌드 모드 사용으로 전환했습니다. 우리는 이제 변환의 배경 크기를 전환하고 : 초점과 : 호버 상태; 그리고 우리는 이제 변환이 아니라 배경 크기의 수직 구성 요소를 나타내는 사용자 정의 속성을 바꾸고 있습니다.

이것은 완벽한 솔루션이 아니지만 훨씬 좋습니다.

첫 번째 문제는 Firefox에서 캡션의 라이브 데모 링크를 확인하면 확실히 알아 차린 문제입니다. 전혀 작동하지 않습니다. 이것은 2018 년에보고 한 Firefox 버그 때문입니다. 그런 다음 블렌드 모드로 Toying을 시작할 때까지 모든 것을 잊어 버렸습니다.

두 번째 문제는 녹음에서 눈에 띄는 문제입니다. 링크는 다소 사라 보인다. 어떤 이유로 든 크롬은 링크와 같은 인라인 요소 (DIV와 같은 블록 요소에서는 발생하지 않음)와 가장 가까운 조상의 배경 (이 경우 섹션)이 배경 블렌드 모드가 정상적인 것으로 설정되어 있으면 가장 가까운 조상 (이 경우 섹션)과 같은 인라인 요소를 혼합하기 때문입니다.

더욱 이상하게도 격리를 설정하십시오. 링크 또는 상위 단락에서 격리하는 것은 이런 일이 발생하지 않습니다. 나는 여전히 맥락과 관련이 있어야한다는 잔소리를 느꼈기 때문에 가능한 해킹을 계속하기로 결정했고 무언가가 작동하기를 바랍니다. 글쎄, 나는 그것에 많은 시간을 할애 할 필요가 없었습니다. 불투명도를 하위 저렴한 상태로 설정하지만 (여전히 1에 충분히 가깝기 때문에 완전히 불투명하지 않다는 것은 눈에 띄지 않습니다) 값은이를 고정시킵니다.

 A {
  / * 이전과 동일 */
  불투명도 : .999; / * 혼합 문제를 수정하려는 해킹 ¯_ (ツ) _/¯ */
}

마지막 문제는 녹음에서 눈에 띄는 또 다른 문제입니다. "amur"의 끝에서 'r'을 보면 배경 사각형 외부로 떨어질 때 오른쪽 끝이 잘린다는 것을 알 수 있습니다. “레오파드”의 'R'과 비교하면 특히 눈에.니다.

나는 이것을 고치기위한 높은 희망이 없었지만 어쨌든 트위터에 질문을 던졌습니다. 그리고 당신은 무엇을 알고 있습니까? 우리가 이미 설정 한 패딩과 함께 박스-디코레이션 브레이크를 사용하여 원하는 효과를 얻는 데 도움이 될 수 있습니다!

 A {
  / * 이전과 동일 */
  박스-디코레이션 브레이크 : 클론;
}

Box-Decoration-Break는 여전히 모든 WebKit 브라우저에 대한 -webkit- 접두사가 필요하지만, 적어도 하나의 값이 텍스트 인 Background-Clip과 같은 속성의 경우와 달리 자동 준비 도구는 문제를 잘 처리 할 수 ​​있습니다. 그래서 위의 코드에 접두사 버전을 포함시키지 않은 이유입니다.

내가 얻은 또 다른 제안은 패딩을 보상하기 위해 음수 마진을 추가하는 것이 었습니다. 나는 이것에 대해 앞뒤로 갈 것입니다 - 나는 그것의 유무에 관계없이 결과를 더 좋아하는지 결정할 수 없습니다. 어쨌든 언급 할 가치가있는 옵션입니다.

 $ P : .25EM;

A {
  / * 이전과 동일 */
  여백 : 0 (-$ p); / * 우리는 그것을 괄호 안에 넣었으므로 Sass는 뺄셈을 수행하지 않습니다 */
  패딩 : 0 $ P;
}

그럼에도 불구하고, 나는 배경 위치 또는 그라디언트의 배경 크기 만 애니메이션하는 것이 약간 지루하다는 것을 인정해야합니다. 그러나 Houdini 덕분에 우리는 현재 Chromium에서만 지원 되더라도 우리가 원하는 그라디언트의 구성 요소를 창의하고 애니메이션 할 수 있습니다. 예를 들어, 아래와 같은 방사형 그라디언트 ()의 반경 또는 conic-gradient ()의 진행.

요소 (또는 배경)의 영역 만 반전

이것은 요소 복제를 사용하여 종종 달성하는 효과입니다. 두 개의 사본은 하나의 상단에 하나씩 겹쳐져 있으며, 그 중 하나는 반전 필터가 있고 클립 경로가 상단에 사용되어 두 층 모두를 표시합니다. 또 다른 경로는 알파가 낮은 두 번째 요소를 충분히 쌓는 것입니다.

이 두 가지 접근 방식은 모든 내용과 후손으로 전체 요소의 일부를 반전 시키려면 작업을 수행하지만 배경의 일부만 반전하고 싶을 때 우리를 도울 수는 없습니다. 필터와 배경 필터는 배경뿐만 아니라 전체 요소에 영향을 미칩니다. 또한 새 필터 () 함수 (이미 Safari에서 지원하는)는 배경 레이어에만 영향을 미치지 만 배경의 일부가 아니라 배경의 전체 영역에 영향을 미칩니다.

이 기술은 매우 간단합니다. 우리는 배경 레이어가 있으며, 그 중 일부는 반전하고 하나 이상의 그라디언트 층이 있으며 다른 층과 투명성 (또는 검은 색)의 역전을 원하는 흰색 영역을 제공합니다. 그런 다음 오늘 논의 된 두 개의 블렌드 모드 중 하나를 사용하여 혼합합니다. 역전을 위해 배제를 선호합니다 (차이보다 짧은 문자입니다).

첫 번째 예가 있습니다. 우리는 2 층 배경을 가진 사각형 요소가 있습니다. 두 층은 고양이의 그림과 흰색과 투명 사이의 급격한 전환이있는 구배입니다.

 div {
  배경: 
    선형 그레이드 (45deg, 흰색 50%, 투명 0), 
    URL (cat.jpg) 50%/ 덮개;
}

이것은 우리에게 다음과 같은 결과를줍니다. 우리는 또한 치수, 국경 래디 디우스, 그림자, 과정에서 텍스트를 예열했지만이 맥락에서 그 모든 것들이 실제로 중요하지는 않습니다.

다음으로, 우리는 왼쪽 하단을 반전시키기 위해서는 한 번 더 CSS 선언이 필요합니다.

 div {
  / * 이전과 동일 */
  배경 블렌드 모드 : 제외; / * 또는 차이이지만 1 숯이 더 길다 */
}

텍스트가 반전의 영향을받지 않는 방법에 유의하십시오. 배경에만 적용됩니다.

당신은 아마도 대화 형 전후 이미지 슬라이더를 알고있을 것입니다. CSS 트릭에서 바로 여기에 무언가를 보았을 수도 있습니다. 나는 compressor.io에서 그것을 보았습니다.이 기사에 사용 된 이미지를 포함하여 이미지를 압축하는 데 종종 사용합니다!

우리의 목표는 단일 HTML 요소, 100 바이트의 JavaScript 미만의 JavaScript를 사용하여 종류의 종류를 만드는 것입니다.

우리의 요소는 범위 입력이 될 것입니다. 우리는 최소 또는 최대 속성을 설정하지 않으므로 기본값은 각각 0과 100으로 기본적으로 설정합니다. 우리는 값 속성을 설정하지 않으므로 기본값을 50으로 설정합니다.이 값은 스타일 속성으로 설정된 사용자 정의 속성 -K를 제공합니다.

CSS에서는 기본 재설정으로 시작한 다음 입력을 전체 뷰포트 높이를 차지하는 블록 요소로 만듭니다. 우리는 또한 트랙과 엄지 손가락에 치수와 더미 배경을 제공하여 즉시 화면에서 물건을 볼 수 있도록합니다.

 $ hallge : 5em;

@mixin track () {
  국경 : 없음;
  너비 : 100%;
  높이 : 100%;
  배경 : URL (flowers.jpg) 50%/ Cover;
}

@mixin thumb () {
  국경 : 없음;
  너비 : $ rhame-w;
  높이 : 100%;
  배경 : 보라색;
}

* {
  여백 : 0;
  패딩 : 0;
}

[type = 'range'] {
  & ::- WebKit-Slider-Thumb, 
  & ::-WebKit-Slider-Runnable-Track {-webkit-Appearance : 없음; }
  
  디스플레이 : 블록;
  너비 : 100VW; 높이 : 100VH;
  
  & ::-WebKit-Slider-Runnable-Track {@include 트랙; }
  & ::-Moz-Range-Track {@include 트랙; }
  
  & ::-WebKit-Slider-Thumb {@include thumb; }
  & ::-Moz-Range-Thumb {@include thumb; }
}

다음 단계는 트랙에 또 다른 배경 레이어를 추가하는 것입니다. 투명과 흰색 사이의 분리 라인이 현재 범위 입력 값 -K에 의존 한 다음 두 가지를 혼합하는 선형 등급 레이어를 추가하는 것입니다.

 @mixin track () {
  / * 이전과 동일 */
  배경:
    URL (flowers.jpg) 50%/ 커버, 
    선형 그레이드 (90deg, 투명 var (-p), 흰색 0);
  배경 블렌드 모드 : 제외;
}

[type = 'range'] {
  / * 이전과 동일 */
  --p : calc (var (-k) * 1%);
}

트랙의 두 배경 레이어의 순서는 제외와 차이가 모두 정류되므로 중요하지 않습니다.

그것은 무언가처럼 보이기 시작했지만 엄지 손가락을 드래그하면 분리 선을 움직이지 않습니다. 이는 현재 값인 -k (그라디언트의 분리선 위치 -P 의존)가 자동으로 업데이트되지 않기 때문에 발생합니다. 슬라이더 값이 변경 될 때마다 -k를 설정할 때마다 슬라이더 값을 얻는 작은 자바 스크립트 로이 값을 고정합시다.

 addeventListener ( '입력', e => {
  _t = E.TARGET하자;
  _T.style.setProperty ( '-k', _t.Value)
})

이제 모든 것이 잘 작동하는 것 같습니다!

하지만 정말로? 엄지 배경에 대해 약간 더 멋진 일을한다고 가정 해 봅시다.

 $ thnom-R : .5*$ thumb-W;
$ thng-l : 2px;

@mixin thumb () {
  / * 이전과 동일 */
  -목록 : #fff 0% 60deg, 투명 0%;
  배경: 
    conic-gradient (60deg, var (-목록)) 0/37.5%/ * 왼쪽 화살표 */, 
    Conic-gradient (240deg, var (-목록)) 100%/37.5%/ * 오른쪽 화살표 */, 
    방사형 그레이드 (원, 
      투명한 calc ( #{$ jnum -r} - #{$ thumb -l} -1px) / * 내부 원 * /, 
      #fff calc (#{$ jnum-r}-#{$ hall-l}) calc (#{$ thng-r} -1px) / * Circle Line * /, 
      투명한 $ halge-r / * 외부 원 * /), 
    선형 그레이드 (
      #fff calc (50%- #{$ thnom-r} .5* #{$ thumb-l}) /*상단 줄* /, 
      투명한 0 calc (50% #{$ thumb-r}-.5* #{$ thng-l}) /**gap behind* /, 
      #fff 0/ * 결론 */) 50% 0/ #{$ hall-l};
  배경 반복 : 비 반복;
}

Linear-Gradient ()는 얇은 수직 분리 라인을 생성하고, 방사형 그레이드 ()는 원을 생성하고, 두 개의 conic-gradient () 층은 화살표를 만듭니다.

한쪽 끝에서 다른 쪽 끝으로 엄지를 끌 때 문제는 명백합니다. 분리 선은 엄지 손가락의 수직 중간 선에 고정되어 있지 않습니다.

--p에서 calc (var (-k)*1%)를 설정하면 분리 라인은 0%에서 100%로 이동합니다. 실제로 100%이전의 절반의 엄지 너비까지 절반의 엄지 너비 인 $ thume-r의 출발점에서 실제로 움직여야합니다. 즉, 100% 뺀 범위 내에서 엄지 너비, $ 험악. 우리는 양쪽 끝에서 절반을 빼기 때문에 차감하는 전체 엄지 너비입니다. 고칠 봅시다!

 ---p : calc ( #{$ thnom-r} var (-k) * (100%- #{$ thumb-w}) / 100);

훨씬 낫다!

그러나 웨이 범위의 입력이 작동하고, 경계 박스는 트랙의 컨텐츠 박스 (크롬)의 한계 내에서 또는 실제 입력 컨텐츠 박스 (Firefox)의 한계 내에서 움직입니다. 엄지 손가락의 중간 선 (그리고 결과적으로 분리선)이 뷰포트 가장자리까지 끝날 때 더 좋아 보일 것입니다.

범위 입력의 작동 방식을 변경할 수는 없지만 입력이 뷰포트 외부에서 왼쪽의 절반의 엄지 너비와 오른쪽 절반의 절반으로 확장 할 수 있습니다. 이로 인해 너비는 뷰포트, 100VW 및 전체 엄지 너비, $ 험악한 폭과 동일하게 만듭니다.

 신체 {오버플로 : 숨겨진; }

[type = 'range'] {
  / * 이전과 동일 */
  왼쪽 마진 :-$ thnom-r;
  너비 : calc (100vw #{$ thumb-w});
}

커서와 관련된 몇 가지 더 치열한 조정과 그게 다야!

이 버전 (compressor.io 웹 사이트에서 영감을 얻음)은 마우스가 움직일 때 3D 회전이 변경되는 카드 내에 입력을 넣는 것입니다.

수직 슬라이더도 사용할 수도 있습니다. 커스텀 스타일의 수직 슬라이더를 생성하는 유일한 신뢰할 수있는 크로스 브라우저 방법은 회전을 적용하는 것이지만 배경을 회전시키는 것입니다. 우리가하는 일은 (회전되지 않은) 슬라이더 컨테이너에 - -p 값과 이러한 배경을 설정 한 다음 입력과 트랙을 완전히 투명하게 유지하는 것입니다.

이것은 아래 데모에서 실제로 볼 수 있습니다. 여기서 나는 사랑하는 Kreator 까마귀를 과시하는 사진을 반전시키고 있습니다.

물론 멋진 효과를 위해 방사형 그레이드 ()를 사용할 수도 있습니다.

 배경: 
  Radial-Gradient (Var (-x, 50%) Var (-y, 50%), 
    #000 calc (var (-card-r) -1px), #fff var (-card-r)) Border-Box, 
  $ IMG 50%/ 커버;

이 경우 -x 및 --y 사용자 정의 속성에 의해 제공된 위치는 카드의 마우스 모션에서 계산됩니다.

배경의 역 영역이 그라디언트에 의해 반드시 생성 될 필요는 없습니다. 또한 배경 이미지에 대한 대조 텍스트에 대한이 오래된 기사에서 볼 수 있듯이 헤딩 텍스트 뒤의 영역 일 수도 있습니다.

점진적인 반전

역전을위한 블렌딩 기술은 여러 가지 방식으로 필터를 사용하는 것보다 강력합니다. 또한 그라디언트를 따라 효과를 점차적으로 적용 할 수 있습니다. 예를 들어, 왼쪽은 전혀 반전되지 않지만 우리는 완전히 반전까지 오른쪽으로 진행됩니다.

이 효과를 얻는 방법을 이해하려면 먼저 반전 (P) 효과를 얻는 방법을 이해해야합니다. 여기서 P는 [0%, 100%] 간격 (또는 10 진수 표현을 사용하는 경우 [0, 1] 간격)의 값이 될 수 있습니다.

차이와 제외 모두에 적합한 첫 번째 방법은 흰색의 알파 채널을 p로 설정하는 것입니다. 이것은 슬라이더를 드래그하는 아래 데모에서 실제로 볼 수 있습니다.

SPEC에 따르면 HSL (0, 0%, 100% / 100%) 표기법에 대해 궁금한 경우, 이는 이제 알파가 1 인 흰색을 나타내는 유효한 방법입니다.

또한 필터는 필터로 인해 다음과 같은 방식으로 작동합니다 (P)는 일반적인 경우 (즉, 모든 채널 값을 낭비 된 간격 [Min (P, Q), Max (P, Q))로 스케일링합니다. 여기서 Q는 P (또는 Q = 1-P)를 뒤집기 전에 (1에서 Q = 1- P)를 보완 할 때 다음과 같은 일반 채널에 대한 다음과 같은 경우 :

 1- (q ch · (p- q)) = 
= 1- (1 -p ch · (p- (1 -p)) = 
= 1- (1 -p ch · (2 ​​· p -1)) = 
= 1- (1 -p 2 · ch · p- ch) = 
= 1-1 p -2 · ch · p ch = 
= CH P -2 · CH · P.

우리가 얻은 것은 다른 채널이 P 인 배제를위한 공식입니다! 따라서 다른 층이 RGB (P, P, P) 일 때 제외 블렌드 모드를 사용하여 [0%, 100%] 간격으로 P에 대한 필터 : 반전 (P)과 동일한 효과를 얻을 수 있습니다.

이것은 우리가 다음과 같이 왼쪽 가장자리를 따라 반전에서 전혀 반전에서 전혀 반전에 이르기까지 점진적인 반전을 가질 수 있음을 의미합니다.

 배경: 
  URL (butterfly_blues.jpg) 50%/ Cover, 
  선형 그레이드 (90deg, 
    #000 / * RGB (0%, 0%, 0%) 및 HSL (0, 0%, 0%) * /에 해당합니다. 
    #fff / * RGB (100%, 100%, 100%) 및 HSL (0, 0%, 100%)에 해당합니다. * /);
배경 블렌드 모드 : 제외;

점진적인 반전을 위해 검은 색에서 흰색으로의 그라디언트를 사용하면 차이가 아니라 제외 블렌드 모드와 만 작동합니다. 이 경우 차이에 의해 생성 된 결과는 공식을 고려할 때 중간에서 50% 회색을 통과하지 못하는 의사 점진적인 반전입니다. 그것이 대비가 더 충격적으로 보이는 이유입니다. 그것은 아마도 조금 더 예술적 일 것입니다. 그러나 그것은 실제로 내가 의견을 제시 할 자격이있는 것은 아닙니다.

배경에 걸쳐 다른 수준의 반전을 가질 때 반드시 검은 색에서 흰색 그라디언트로 올 필요는 없습니다. 또한 이미지의 검은 색 영역이 배경색을 보존하고 흰색 영역이 완전히 반전되며 제외 블렌드 모드를 사용할 때의 모든 것에 대한 부분 반전을 가질 수 있으므로 흑백 이미지에서 나올 수 있습니다. 차이가 다시 우리에게 스타커 듀오 톤 결과를 줄 것입니다.

This can be seen in the following interactive demo where you can change the background-color and drag the separation line between the results produced by the two blend modes.

Hollow intersection effect

The basic idea here is we have two layers with only black and white pixels.

Ripples and rays

Let's consider an element with two pseudos, each having a background that's a repeating CSS gradient with sharp stops:

 $d: 15em;
$u0: 10%;
$u1: 20%;

div {
  &::before, &::after {
    디스플레이 : 인라인 블록;
    width: $d;
    height: $d;
    background: repeating-radial-gradient(#000 0 $u0, #fff 0 2*$u0);
    콘텐츠: '';
  }
  
  &::후에 {
    background: repeating-conic-gradient(#000 0% $u1, #fff 0% 2*$u1);
  }
}

Depending on the browser and the display, the edges between black and white may look jagged… or not.

Just to be on the safe side, we can tweak our gradients to get rid of this issue by leaving a tiny distance, $e, between the black and the white:

 $u0: 10%;
$e0: 1px;
$u1: 5%;
$e1: .2%;

div {
  &::전에 {
    배경: 
      repeating-radial-gradient(
        #000 0 calc(#{$u0} - #{$e0}), 
        #fff $u0 calc(#{2*$u0} - #{$e0}), 
        #000 2*$u0);
  }
  
  &::후에 {
    배경: 
      repeating-conic-gradient(
        #000 0% $u1 - $e1, 
        #fff $u1 2*$u1 - $e1, 
        #000 2*$u1);
  }
}

Then we can place them one on top of the other and set mix-blend-mode to exclusion or difference, as they both produce the same result here.

 div {
  &::before, &::after {
    /* same other styles minus the now redundant display */
    위치 : 절대;
    mix-blend-mode: exclusion;
  }
}

Wherever the top layer is black, the result of the blending operation is identical to the other layer, whether that's black or white. So, black over black produces black, while black over white produces white.

Wherever the top layer is white, the result of the blending operation is identical to the other layer inverted. So, white over black produces white (black inverted), while white over white produces black (white inverted).

However, depending on the browser, the actual result we see may look as desired (Chromium) or like the ::before got blended with the greyish background we've set on the body and then the result blended with the ::after (Firefox, Safari).

The way Chromium behaves is a bug, but that's the result we want. And we can get it in Firefox and Safari, too, by either setting the isolation property to isolate on the parent div (demo) or by removing the mix-blend-mode declaration from the ::before (as this would ensure the blending operation between it and the body remains the default normal, which means no blending) and only setting it on the ::after (demo).

Of course, we can also simplify things and make the two blended layers be background layers on the element instead of its pseudos. This also means switching from mix-blend-mode to background-blend-mode.

 $d: 15em;
$u0: 10%;
$e0: 1px;
$u1: 5%;
$e1: .2%;

div {
  width: $d;
  height: $d;
  배경: 
    repeating-radial-gradient(
      #000 0 calc(#{$u0} - #{$e0}), 
      #fff $u0 calc(#{2*$u0} - #{$e0}), 
      #000 2*$u0), 
    repeating-conic-gradient(
      #000 0% $u1 - $e1, 
      #fff $u1 2*$u1 - $e1, 
      #000 2*$u1);;
  background-blend-mode: exclusion;
}

This gives us the exact same visual result, but eliminates the need for pseudo-elements, eliminates the potential unwanted mix-blend-mode side effect in Firefox and Safari, and reduces the amount of CSS we need to write.

Split screen

The basic idea is we have a scene that's half black and half white, and a white item moving from one side to the other. The item layer and the scene layer get then blended using either difference or exclusion (they both produce the same result).

When the item is, for example, a ball, the simplest way to achieve this result is to use a radial-gradient for it and a linear-gradient for the scene and then animate the background-position to make the ball oscillate.

 $d: 15em;

div {
  width: $d;
  height: $d;
  배경: 
    radial-gradient(closest-side, #fff calc(100% - 1px), transparent) 
      0/ 25% 25% no-repeat,
    linear-gradient(90deg, #000 50%, #fff 0);
  background-blend-mode: exclusion;
  animation: mov 2s ease-in-out infinite alternate;
}

@keyframes mov { to { background-position: 100%; }}

We can also make the ::before pseudo the scene and the ::after the moving item:

 $d: 15em;

div {
  display: grid;
  width: $d;
  height: $d;
  
  &::before, &::after {
    grid-area: 1/ 1;
    background: linear-gradient(90deg, #000 50%, #fff 0);
    콘텐츠: '';
  }
  
  &::후에 {
    place-self: center start;
    padding: 12.5%;
    국경-라디우스 : 50%;
    배경 : #fff;
    mix-blend-mode: exclusion;
    animation: mov 2s ease-in-out infinite alternate;
  }
}

@keyframes mov { to { transform: translate(300%); }}

This may look like we're over-complicating things considering that we're getting the same visual result, but it's actually what we need to do if the moving item isn't just a disc, but a more complex shape, and the motion isn't just limited to oscillation, but it also has a rotation and a scaling component.

 $d: 15em;
$t: 1s;

div {
  /* same as before */
  
  &::후에 {
    /* same as before */
    /* creating the shape, not detailed here as
       it's outside the scope of this article */
    @include poly;
    /* the animations */
    생기: 
      t $t ease-in-out infinite alternate, 
      r 2*$t ease-in-out infinite, 
      s .5*$t ease-in-out infinite alternate;
  }
}

@keyframes t { to { translate: 300% } }
@keyframes r {
  50% { rotate: .5turn; }
  100% { rotate: 1turn;; }
}
@keyframes s { to { scale: .75 1.25 } }

Note that, while Safari has now joined Firefox in supporting the individual transform properties we're animating here, these are still behind the Experimental Web Platform features flag in Chrome (which can be enabled from chrome://flags as shown below).

More examples

We won't be going into details about the “how” behind these demos as the basic idea of the blending effect using exclusion or difference is the same as before and the geometry/animation parts are outside the scope of this article. However, for each of the examples below, there is a link to a CodePen demo in the caption and a lot of these Pens also come with a recording of me coding them from scratch.

Here's a crossing bars animation I recently made after a Bees & Bombs GIF:

And here's a looping moons animation from a few years back, also coded after a Bees & Bombs GIF:

We're not necessarily limited to just black and white. Using a contrast filter with a subunitary value (filter: contrast(.65) in the example below) on a wrapper, we can turn the black into a dark grey and the white into a light grey:

Here's another example of the same technique:

If we want to make it look like we have a XOR effect between black shapes on a white background, we can use filter: invert(1) on the wrappers of the shapes, like in the example below:

And if we want something milder like dark grey shapes on a light grey background, we don't go for full inversion, but only for partial one. This means using a subunitary value for the invert filter like in the example below where we use filter: invert(.85):

It doesn't necessarily have to be something like a looping or loading animation. We can also have a XOR effect between an element's background and its offset frame. Just like in the previous examples, we use CSS filter inversion if we want the background and the frame to be black and their intersection to be white.

Another example would be having a XOR effect on hovering/ focusing and clicking a close button. The example below shows both night and light theme cases:

Bring me to life

Things can look a bit sad only in black and white, so there are few things we can do to put some life into such demos.

The first tactic would be to use filters. We can break free from the black and white constraint by using sepia() after lowering the contrast (as this function has no effect over pure black or white). Pick the hue using hue-rotate() and then fine tune the result using brightness() and saturate() or contrast().

For example, taking one of the previous black and white demos, we could have the following filter chain on the wrapper:

 필터: 
  contrast(.65) /* turn black and white to greys */
  sepia(1) /* retro yellow-brownish tint */
  hue-rotate(215deg) /* change hue from yellow-brownish to purple */
  blur(.5px) /* keep edges from getting rough/ jagged */
  contrast(1.5) /* increase saturation */
  brightness(5) /* really brighten background */
  contrast(.75); /* make triangles less bright (turn bright white dirty) */

For even more control over the result, there's always the option of using SVG filters.

The second tactic would be to add another layer, one that's not black and white. For example, in this radioactive pie demo I made for the first CodePen challenge of March, I used a purple ::before pseudo-element on the body that I blended with the pie wrapper.

 body, div { display: grid; }

/* stack up everything in one grid cell */
div, ::before { grid-area: 1/ 1; }

body::before { background: #7a32ce; } /* purple layer */

/* applies to both pie slices and the wrapper */
div { mix-blend-mode: exclusion; }

.a2d { background: #000; } /* black wrapper */

.pie {
  background: /* variable size white pie slices */
    conic-gradient(from calc(var(--p)*(90deg - .5*var(--sa)) - 1deg), 
      투명한, 
      #fff 1deg calc(var(--sa) var(--q)*(1turn - var(--sa))), 
      transparent calc(var(--sa) var(--q)*(1turn - var(--sa)) 1deg));
}

This turns the black wrapper purple and the white parts green (which is purple inverted).

Another option would be blending the entire wrapper again with another layer, this time using a blend mode different from difference or exclusion. Doing so would allow us more control over the result so we're not limited to just complementaries (like black and white, or purple and green). That, however, is something we'll have to cover in a future article.

Finally, there's the option of using difference (and not exclusion) so that we get black where two identical (not necessarily white) layers overlap. For example, the difference between coral and coral is always going to be 0 on all three channels, which means black. This means we can adapt a demo like the offset and XOR frame one to get the following result:

With some properly set transparent borders and background clipping, we can also make this work for gradient backgrounds:

Similarly, we can even have an image instead of a gradient!

Note that this means we also have to invert the image background when we invert the element in the second theme scenario. But that should be no problem, because in this article we've also learned how to do that: by setting background-color to white and blending the image layer with it using background-blend-mode: exclusion!

Closing thoughts

Just these two blend modes can help us get some really cool results without resorting to canvas, SVG or duplicated layers. But we've barely scratched the surface here. In future articles, we'll dive into how other blend modes work and what we can achieve with them alone or in combination with previous ones or with other CSS visual effects such as filters. And trust me, the more tricks you have up your sleeve, the cooler the results you're able to achieve get!

위 내용은 조정 블렌드 모드 : '차이'및 '제외'의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!