CSS 혼합 모드가 멋진 효과를 낼 수 있다는 것을 알고 있었지만, 그럼에도 불구하고 최근에 본 CodePen은 그 능력에 충격을 받았습니다. Apple에서 영감을 받은 Pride Clock에 대한 영구 링크 Apple에서 영감을 받은 프라이드 시계 Scott Kellum 의 이 CodePen 은 제 눈을 사로잡았습니다. 숫자에 대한 HTML 텍스트라는 것을 알 수 있었지만 그가 어떻게 방사형 선 효과를 만들었는지 확신할 수 없었습니다. 코드를 파헤쳤을 때 CSS가 효과를 만드는 데 얼마나 적게 소요되었는지에 충격을 받았습니다. 다음은 쉽게 시각화할 수 있도록 계층화된 분석입니다. CSS로 무지개 선 효과를 만드는 데 사용된 레이어를 보여주는 다이어그램. 맨 아래 레이어는 회색과 흰색이 번갈아 가며 반복되는 간단한 방사형 그래디언트입니다. background: repeating-radial-gradient( circle at -150% -25%, #fff, #777 0.025em, #fff 0.05em ); 구문에 익숙하지 않은 경우 "흰색에서 중간 지점에서 회색으로, 다시 흰색으로 그라디언트를 만든 다음 화면 밖의 원점에서 방사되는 해당 그라디언트를 반복합니다."라고 되어 있습니다. 이것이 위 그림의 첫 번째 레이어를 제공하는 것입니다. 두 번째 레이어는 현재 시간을 표시하는 일부 HTML 텍스트입니다. 텍스트가 회전하고(방사형 그래디언트의 각도와 대략 일치하도록) 흐리게 처리되고 약간 투명해집니다. filter: blur(0.0125em); transform: rotate(6deg); opacity: 0.46; 이 두 레이어를 함께 쌓으면 다이어그램에서 세 번째 레이어가 생성됩니다. 여기가 흥미로워집니다. 네 번째 레이어는 동일한 반복 방사형 그라디언트를 사용하지만 흰색과 회색을 번갈아 사용하는 대신 무지개를 통과하며 단단한 색상 정지가 있으므로 혼합이 없습니다. 이 레인보우 레이어는 블렌드 모드를 사용하여 뒤에 있는 레이어에서 필터 역할을 합니다. mix-blend-mode: lighten; 이것이 다이어그램에서 배경 선과 텍스트에 색상을 지정하는 다섯 번째 레이어를 생성하는 데 필요한 전부입니다. 그리고 마지막 단계는 아마도 가장 간단한 단계일 것입니다. 전체를 위한 컨테이너에 극도의 대비 필터가 적용됩니다. filter: contrast(2000%); 이렇게 하면 배경과 텍스트의 모든 회색 색상이 순수한 검정 또는 흰색이 됩니다. 그리고 겹치는 모든 위치에서 숫자를 만들기 위해 선이 두꺼워지거나 가늘어지는 것처럼 보이는 깔끔한 효과를 얻습니다. 반면 무지개 오버레이는 각 선을 단색 단색. 편집: Scott은 Twitter에서 저에게 핑을 보냈고 여기에서 주문이 약간 잘못되었음을 알렸습니다 . 대비 는 색상이 렌더링되는 방식에 영향을 미치므로 대비 필터는 색상 레이어 보다 먼저 적용됩니다. 고마워, 스콧! 우아하다! CSS 몇 줄과 간단한 레이어 세트가 훨씬 더 복잡한 것으로 변환됩니다! 즉시 생각이 났습니다. 이 기술을 사용하여 사진 필터를 만들 수 있을까요? 방사형 조각 필터에 대한 영구 링크 방사형 조각 필터 내 첫 번째 실험 은 기본적으로 이전 예제의 방사형 선 효과를 복제하고 이를 사진에 적용하여 지폐나 신문 헤드컷 에서 볼 수 있는 것과 유사한 방사형 조각 효과를 만드는 것이었 습니다. CSS로 방사형 조각 효과를 만드는 데 사용되는 레이어를 보여주는 다이어그램. 첫 번째 단계는 완전히 동일합니다. 이미지 뒤에 있는 반복되는 방사형 그라디언트를 만듭니다. background: repeating-radial-gradient( circle at 0 -25%, #fff, #333 0.25em, #fff 0.5em ); 다른 원점과 더 어두운 회색 음영을 설정했지만 그 외에는 동일합니다. 다음으로 이미지를 맨 위에 배치하고 필터를 추가했습니다. 이미지를 회색조로 변환하고 밝기와 대비를 약간 조정하고 약간의 흐림 효과를 적용했습니다(이 효과는 부드러운 초점에서 더 잘 작동함). filter: grayscale(1) brightness(90%) contrast(150%) blur(3px); 그런 다음 hard-light배경 그라디언트가 전체 사진에 퍼지도록 하는 의 혼합 모드를 적용했습니다. mix-blend-mode: hard-light; 세 번째 레이어에 표시되는 결과는 무지개 오버레이 및 대비가 추가되기 전의 이전 예와 유사해야 합니다. 마지막 단계는 여전히 전체 컨테이너에 적용되는 극도의 대비 필터입니다. filter: contrast(500%); 그리고 헤이 프레스토! 저것 봐! 몇 줄의 CSS만으로 사진에 적용되는 설득력 있는 목판화 또는 조각 효과! 그러나 그것은 나를 생각하게 했다. 만화책 팬으로서 궁금했습니다. 이 동일한 기술로 하프톤 필터를 생성할 수 있을까요? 하프톤 필터에 대한 영구 링크 하프톤 필터 나는 대답이 예라고 말할 수 있어 기쁩니다! CSS로 하프톤 효과를 만드는 데 사용되는 레이어를 보여주는 다이어그램. 두 번째 실험에서는 공식을 한 번만 변경했습니다. 배경에 선을 만들기 위해 방사형 그라디언트 대신 단일 그라디언트 "점"을 반복 배경으로 사용했습니다. background: radial-gradient(circle at center, #333, #fff); background-size: 0.5em 0.5em; transform: rotate(20deg); 배경 크기를 설정하면 내가 정의한 단일 회색 원 그라디언트가 전체 캔버스에서 반복됩니다. 회전은 선택 사항이지만 하프톤 도트가 직선이면 부자연스러워 보일 수 있습니다. (컬러 이미지에 하프톤을 사용하는 경우 모아레 패턴 을 피하기 위해 각 색상은 항상 다른 색상과 약간 오프셋됩니다 .) 이 균일한 점이 사진과 겹쳐지고 극도의 대비 필터를 통과하면 동일한 효과가 발생합니다. 모든 회색 음영은 순수한 검정 또는 순수한 흰색으로 강제됩니다. 그러나 선이 굵어지고 가늘어지는 대신 이제 점의 크기가 커지고 줄어들게 되었습니다! 결론에 대한 영구 링크 결론 나는 이 실험들에 이보다 더 만족할 수 없었다. CSS의 기능에 대해 잘 알고 있다고 생각하지만 CSS 몇 줄만 사용하여 조각 또는 하프톤 사진 필터와 같은 것을 얼마나 쉽게 만들 수 있는지 알고 충격을 받았습니다! 이 중 하나는 오래된 신문 페이지나 제록스 펑크 쇼 전단지와 같은 디자인에 재미있는 효과가 될 수 있습니다. CSS 혼합 모드를 사용하여 멋진 필터를 만드셨습니까?