할로윈, (CSS) 마스크 및 논리 게이트

이 사이트에는 제가 보통 comiCSS 만화를 게시하고 영감을 찾는 주간 Meme Monday 스레드가 있습니다. 지난 주 @webbureaucrat가 내 관심을 끌었던 만화를 공유했습니다:

재미있어서 마스크를 사용하여 HTML과 CSS로 나만의 버전을 만들기로 결정했습니다.

첫 번째 행은 언뜻 보기에 만들기 쉬워 보였습니다. 두 개의 방사형 그라데이션과 가장 좋은 마스크 합성물을 선택하는 것입니다. 두 번째 줄이 더 어려워 보였습니다. 그라데이션을 하나 더 추가하는 것으로 충분할까요?

나중에 추가될 선과 잭오랜턴 얼굴 특징을 무시하면 만화의 기본은 교차하는 두 개의 원이 됩니다. 이를 달성하기 위해 두 개의 방사형 그래디언트가 있는 마스크를 만들었습니다.

.pumpkin {
  mask:
    /* trick */
    radial-gradient(circle at 40% 60%, #000 25%, #0000 0),
    /* treat */
    radial-gradient(circle at 60% 60%, #000 25%, #0000 0);
}

이때부터 마스크를 다양한 방식으로 결합하려면 마스크 합성 또는 비표준 -webkit-mask-composite를 사용해야 한다는 것을 알았습니다.

다음은 Firefox에서 작동하지 않는 초기 시도입니다. 이미지 남길게요:

내가 사용한 값은 다음과 같습니다.

• 또는: 이니셜. 기본값은 모두 겹치는 것이므로 특별한 값이 필요하지 않습니다. 마스크 합성물을 추가할 필요조차 없었습니다.
• 그리고: 교차합니다. 적용된 마스크는 모든 마스크의 교차점이 됩니다. 이 경우 두 원의 교차점입니다.
• XOR: 제외합니다. 이는 두 가지 대안을 허용합니다. 마스크 복합의 경우 제외를 사용하여 제외를 달성할 수 있습니다. 하지만 -webkit-mask-composite의 xor 값을 사용할 수도 있습니다. 이는 이 경우에 더 적합하지만 위에서 언급한 것처럼 비표준입니다.

두 번째 행의 경우 전체 컨테이너를 차지하기 위해 세 번째 마스크가 필요했습니다(그리고 NAND를 위한 추가 마스크도 필요했습니다!). 좀 지저분하다는 점을 인정해야 합니다.

• NOR: -webkit-mask-composite: 대상 출력. 전체 컨테이너를 차지하는 마스크가 마지막이기 때문에 이전 마스크의 픽셀(trick OR treat과 동일)이 지워지고 호박 외부 공간에 색상이 남습니다.
• NAND: 마스크-복합: 빼기. 나는 이것을 표준으로 유지하고 단일 마스크 합성 값을 사용하여 너무 많은 레이어(4)로 너무 복잡하게 만들었습니다.
• XNOR: -webkit-mask-composite: xor. 아이러니. XNOR을 생성하려면 xor 값을 사용하지만 선택 항목을 "뒤집는" 추가 레이어를 사용합니다.

시끄러웠어요. Temani Afif와 Ana Tudor —아직 소셜 미디어에서 팔로우하지 않으셨다면 꼭 팔로우하세요. CSS에 능숙합니다. 코드를 단순화하고 표준 마스크 복합 속성을 사용하는 데 도움을 주었습니다.

결과는 아래와 같습니다. 각 셀에 대한 마스크를 설정하고 마스크 합성 값을 인라인으로 표시해야 합니다. 그리고 그 동안 농담을 조금 확장하고 몇 가지 논리 게이트를 더 포함하기로 결정했습니다(일부는 마스크 2~3개 이상이 필요함).

comiCSS 버전

그대로 해도 괜찮지만, 제가 출판하는 CSS 만화에 대해 CSS 표준만 사용하는 더 짧은 버전을 만들기로 결정했습니다(미디엄에서도 보실 수 있습니다!)

2개의 마스크와 표준 마스크-복합 속성으로 생성된 논리 게이트만 사용하므로 모든 브라우저에서 작동합니다. 또한 각 값을 개별적으로 표시합니다. 재미있고 교육적입니다.

위 내용은 할로윈, (CSS) 마스크 및 논리 게이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!