👋 이 기사의 데모는 CSS 그래디언트 및 하위 픽셀 렌더링과 관련된 비표준 버그로 실험합니다. 그들의 행동은 미래에 언제든지 바뀔 수 있습니다. 그들은 또한 지옥처럼 무겁습니다. 클릭하여 로드하는 위치에서 비동기식으로 제공하고 있지만 노트북 팬이 회전하기 시작할 경우 미리 알려드리고자 합니다.
신호가 없는 오래된 TV의 정적 잡음을 기억하십니까? 아니면 신호가 나쁘고 영상이 왜곡될 때? TV 신호의 개념이 당신보다 앞서 있는 경우를 대비하여 제가 의미하는 바를 정확히 보여주는 GIF가 있습니다.
이미지보기 (자동 재생 미디어 포함)
예, CSS만 사용하여 이와 같은 작업을 수행할 것입니다. 우리가 만들고 있는 것은 다음과 같습니다.
코드를 파고들기 전에 제가 보여드릴 방법보다 정적 노이즈 효과를 만드는 더 좋은 방법이 있다는 점을 말씀드리고 싶습니다. 우리는 SVG를 사용할 수 있습니다. Walk Through California 프로그램, filter 재산 등. 사실 Jimmy Chion은 좋은 기사 SVG로 작업하는 방법을 보여줍니다.
여기서 내가 할 것은 그래디언트가 있는 버그를 활용하는 몇 가지 트릭을 탐색하기 위한 일종의 CSS 실험입니다. 재미를 위해 사이드 프로젝트에서 사용할 수 있지만 SVG를 사용하는 것이 더 깨끗하고 실제 프로젝트에 더 적합합니다. 또한 효과는 브라우저에 따라 다르게 작동하므로 이를 확인하는 경우 Chrome, Edge 또는 Firefox에서 보는 것이 가장 좋습니다.
소리를 내자!
이 노이즈 효과를 만들기 위해 우리는… 그래디언트를 사용할 것입니다! 아니오, 그것을 가능하게 하는 비밀 재료나 새로운 속성은 없습니다. 이미 CSS 도구 상자에 있는 것을 사용할 것입니다!
"속임수"는 그래디언트가 앤티앨리어싱에 좋지 않다는 사실에 의존합니다. 하드 스톱 색상을 사용할 때 나타나는 들쭉날쭉한 가장자리를 알고 있습니까? 예, 대부분의 경우에 대해 이야기합니다. 내 기사 그것들은 약간 짜증나고 우리는 항상 몇 개의 픽셀을 추가하거나 제거하여 매끄럽게 해야 하기 때문입니다.
보시다시피 작은 차이가 있기 때문에 두 번째 원이 첫 번째 원보다 더 잘 렌더링됩니다(0.5%) 첫 번째 원과 같은 정수 값을 사용하여 직선형 하드 색상 중지를 사용하는 대신 그라디언트의 두 색상 사이.
이번에는 conic-gradient 결과가 더 분명한 경우:
이 데모를 만드는 동안 흥미로운 아이디어가 떠올랐습니다. 항상 왜곡을 수정하는 대신 그 반대를 시도하는 것은 어떻습니까? 나는 무슨 일이 일어날지 전혀 몰랐지만 재미있는 놀라움이었습니다! 원추형 그래디언트 값을 가져와서 좋지 않은 앤티 앨리어싱 결과를 더욱 악화시키기 위해 값을 줄이기 시작했습니다.
마지막이 얼마나 나쁜지 보이십니까? 그것은 중간에 뒤섞인 일종의 스크램블이며 아무것도 매끄럽지 않습니다. 더 작은 값으로 전체 화면으로 만들어 보겠습니다.
나는 당신이 이것이 어디로 가는지 알 것이라고 생각합니다. 그래디언트에서 딱딱한 색상 정지점에 대해 매우 작은 십진수 값을 사용하면 이상하게 왜곡된 시각 효과를 얻습니다. 우리의 소음이 태어났습니다!
실제 원추형 그래디언트를 계속 볼 수 있기 때문에 원하는 거친 노이즈와는 거리가 멀다. 그러나 값을 아주 아주 작은 값으로 줄일 수 있습니다. 0.0001% — 그리고 갑자기 더 이상 그래디언트가 없지만 순수한 입자가 있습니다.
짜잔! 노이즈 효과가 있고 필요한 것은 하나의 CSS 그래디언트뿐입니다. 이것을 설명하기 전에 보여드리면 그라데이션을 보고 있다는 사실을 결코 깨닫지 못할 것입니다. 그래디언트를 보려면 그래디언트의 중심을 매우 주의 깊게 살펴봐야 합니다.
그래디언트의 위치를 조정하는 동안 그래디언트의 크기를 매우 크게 만들어 임의성을 높일 수 있습니다.
그래디언트는 고정된 3000px 광장에 배치 60% 60% 좌표. 이 경우 우리는 그 중심을 거의 알아차리지 못합니다. 방사형 그래디언트에서도 동일한 작업을 수행할 수 있습니다.
그리고 훨씬 더 무작위로 만들기 위해(그리고 실제 노이즈 효과에 더 가깝게) 그라디언트와 사용을 모두 결합할 수 있습니다. background-blend-mode 일을 부드럽게하기 위해 :
우리의 노이즈 효과는 완벽합니다! 각 예를 자세히 살펴보더라도 그래디언트의 흔적이 없고 오히려 아름다운 거친 정적 노이즈가 있습니다. 우리는 앤티 앨리어싱 버그를 멋진 기능으로 바꿨습니다!
이제 이것을 가지고 있으므로 사용할 수 있는 몇 가지 흥미로운 예를 살펴보겠습니다.
애니메이션 없음 TV 신호
우리가 시작한 데모로 돌아가기:
코드를 확인하면 그라디언트 중 하나에서 CSS 애니메이션을 사용하고 있음을 알 수 있습니다. 정말 간단합니다! 우리가 하는 일은 원추형 그래디언트의 위치를 매우 빠른 속도로 이동하는 것입니다(.1s) 이것이 우리가 얻는 것입니다!
저는 one-div CSS 아트 챌린지에서 이와 동일한 기술을 사용했습니다.
거친 이미지 필터
또 다른 아이디어는 이미지에 노이즈를 적용하여 옛날 모습을 얻는 것입니다. 노이즈 없이 이미지를 보려면 각 이미지를 마우스로 가리키십시오.
의사 요소에 하나의 그래디언트만 사용하고 이미지와 혼합합니다. 덕분에 mix-blend-mode: overlay.
CSS를 사용하면 더 재미있는 효과를 얻을 수 있습니다. filter 재산
그리고 추가하면 mask 믹스에 더 많은 효과를 만들 수 있습니다!
거친 텍스트 처리
이와 동일한 효과를 텍스트에도 적용할 수 있습니다. 다시 말하지만, 우리에게 필요한 것은 background-image 그런 다음 배경을 혼합합니다. 유일한 차이점은 우리가 또한 background-clip 따라서 효과는 각 문자의 범위에만 적용됩니다.
생성 예술
그래디언트 값을 계속 사용하면 단순한 노이즈 효과보다 더 놀라운 결과를 얻을 수 있습니다. 비슷하게 보이는 임의의 모양을 얻을 수 있습니다. 생성 예술!
물론 우리는 많은 작업이 필요한 실제 생성 예술과는 거리가 멀다. 그러나 기술적으로 버그로 간주되는 것으로 무엇을 달성할 수 있는지 확인하는 것은 여전히 만족스럽습니다!
괴물 얼굴
내가 만든 마지막 예 CodePen의 디브토버 2022 컬렉션:
최대 포장
이 작은 CSS 실험을 즐겼기를 바랍니다. 우리는 정확히 "새로운" 것을 배우지 않았지만 그래디언트에 약간의 기이함을 가져다가 그것을 재미있는 것으로 바꿨습니다. 나는 다시 말할 것이다: 이것은 내가 실제 프로젝트에서 사용하는 것을 고려할 것이 아닙니다. 앤티 앨리어싱이 특정 시점에 해결되는지 또는 언제 해결되는지 누가 알 수 있기 때문입니다. 대신, 이것은 내가 우연히 만났을 때 매우 무작위적이고 즐거운 놀라움이었습니다. 또한 제어하기가 쉽지 않으며 브라우저 간에 일관되지 않게 작동합니다.
이것은 당신이 그것으로 무엇을 할 수 있는지 궁금합니다! 값을 가지고 놀고, 다른 레이어를 결합하고, filter및 mix-blend-mode, 또는 무엇이든, 당신은 확실히 정말 멋진 것을 얻을 것입니다. 댓글 섹션에서 창작물을 공유하세요. 상품은 없지만 멋진 컬렉션을 얻을 수 있습니다!
