작동 중인 CSS, SVG 및 캔버스 마스크의 10가지 놀라운 예
게시 됨: 2021-02-09SVG 마스크로 놀라운 일을 할 수 있습니다. 이 기술은 수년 동안 사용되어 왔지만 최근에야 주류 웹 개발에 적용되었습니다.
나는 사용자 정의 클리핑 마스크 및 SVG/캔버스 마스크의 아래 데모를 찾기 위해 웹을 검색했습니다. 이 예는 웹에서 마스크를 어디까지 밀어붙일 수 있는지, 그리고 궁극적으로 마스크가 개발자에게 앞으로 제공할 수 있는 것을 보여줍니다.
1. 텍스트 마스킹
실행 중인 텍스트 마스킹의 깨끗한 예를 보려면 위의 펜을 확인하십시오. HTML의 실제 페이지 텍스트를 사용하므로 원하는 대로 읽을 수 있도록 이 텍스트를 쉽게 변경할 수 있습니다.
모든 마술은 background-clip과 같은 속성을 사용하여 CSS에서 발생합니다. 어떤 페이지의 거의 모든 텍스트에 이를 적용할 수 있지만 명확한 배경이 없으면 표시되지 않습니다.
확대/축소 효과도 순수하게 CSS에서 생성되어 이 코드 조각을 더욱 인상적으로 만듭니다.
2. 컷아웃 마스크 다각형
이 펜은 복잡한 애니메이션에 JavaScript를 사용하지만 모든 마스킹은 캔버스 요소를 통해 처리됩니다. 그것은 놀라울 정도로 복잡한 아이디어이므로 코드를 따라가는 것은 어려울 것입니다.
그러나 위의 폴리곤 마스킹 효과는 내가 본 것 중 가장 독특한 디자인 중 하나입니다. CSS로 디자인된 모양을 취하고 JavaScript를 사용하여 이러한 모양을 배경 이미지를 마스킹하기 위한 페이지 요소로 만듭니다.
이것은 일관된 애니메이션을 실행하고 SVG/XML 콘텐츠의 컨테이너처럼 작동하는 JS 기반 Canvas 요소에서 실행됩니다. 꽤 미친 물건이지만 마스크가 무엇을 할 수 있는지 보는 것은 재미있습니다!
3. 이미지 마스킹
이 cut & dry 예제는 CSS 이미지 마스크가 어떻게 생겼는지 보여줍니다. Vincent De Oliveira가 제작한 위 이미지 마스크의 비포&애프터를 만나보실 수 있습니다.
실제 검은색 질감 마스크는 PNG 파일일 뿐입니다. 그러나 CSS에서 동적으로 이미지 위에 레이어링되어 마스크된 사진 효과를 만듭니다.
투명하게 내보내는 한 원하는 텍스처로 이 작업을 수행할 수 있습니다. 마스크 속성에 대한 많은 세부 정보가 있으며 .svg 파일을 지원하지만 PNG로 시작하는 것이 더 쉬울 수 있습니다.
4. 버튼 호버
버튼 호버 효과를 사용자 정의하는 것에 대해 생각해 본 적이 있습니까? 이 코드 조각은 약간의 창의성과 약간의 CSS 마스킹으로 할 수 있음을 증명합니다.
다시 한 번 코드는 모두 미리 정의된 이미지 마스크에서 실행되며 각 버튼에는 고유한 마스크 효과가 있습니다. 가장 멋진 부분은 마스크를 보여주는 것뿐만 아니라 보기에 애니메이션을 적용하는 호버 애니메이션입니다.
이것은 확실히 실험적인 코드이지만 WebKit 브라우저에서 경이적으로 보이고 이 기술이 몇 년 안에 필수품이 될 수 있기를 바랍니다.
5. SVG 텍스트 마스크
다음은 개발자 Marco Barria가 만든 텍스트 마스크 효과의 약간 다른 예입니다.
이 사용자 정의 SVG 이미지를 정의하는 대신 코드는 실제로 SVG 요소를 사용합니다. 여전히 일반 HTML 텍스트 콘텐츠 위에 구축되지만 동적 SVG 필터와 함께 실행됩니다.
이것은 좀 더 기술적이지만 개발자에게 훨씬 더 많은 제어 권한을 부여합니다. SVG 파일을 만들기 위해 Illustrator를 사용하는 대신 HTML 문서에서 바로 인라인 SVG를 코딩할 수 있습니다.
6. 캔버스 텍스트 마스크
Calvin Davis의 이 캔버스 예제에서는 콘텐츠에 원시 HTML을 사용하지만 텍스트 자체는 선택할 수 없음을 알 수 있습니다.
대신 DOM 외부에서 텍스트를 추상화할 수 있는 Canvas 요소를 사용하여 페이지에서 렌더링됩니다. 이렇게 하면 이미지처럼 작동하므로 텍스트가 배경 위에 가려지는 이 효과를 볼 수 있지만 텍스트처럼 느껴지지 않습니다.
일부 디자이너는 유용성 부족으로 이것을 좋아하지 않을 수 있으므로 선택 가능한 텍스트를 원한다면 이 설정으로 신경쓰지 않을 것입니다.
그러나 이것은 캔버스 모양으로 타이포그래피를 어디까지 밀어붙일 수 있는지에 대한 멋진 예입니다.
7. 애니메이션 그라디언트
또 다른 정말 멋진 텍스트 효과는 개발자 Svante Richter가 만든 애니메이션 그라디언트입니다.
HTML 페이지의 모든 SVG 코드를 사용하므로 마스크를 동적으로 생성합니다. 이 SVG 설정은 전체 페이지를 인수하고 그라데이션 배경을 제공한 다음 텍스트를 통해서만 이 배경을 마스킹하여 작동합니다.
그라디언트는 CSS를 통해 애니메이션을 적용할 수 있으므로 텍스트가 애니메이션의 유일한 부분인 것처럼 보일 것입니다. 꽤 멋진 효과이며 실험적인 웹사이트나 방문 페이지에 추가하는 것을 고려할 수 있습니다.
8. 애니메이션 클리핑 마스크
이 추상 클리핑 마스크 애니메이션은 무작위로 생성된 JS 기반 버블을 사용하여 이미지를 마스킹합니다. 애니메이션 클리핑 마스크와 함께 캔버스 요소를 사용하여 응집력 있는 SVG 얼룩을 형성합니다.
별 것 아닌 것 같지만 개발자 Neil McCallion이 꽤 멋진 코드를 작성했으며 최종 결과는 확실히 이상합니다.
마스킹은 주로 캔버스 요소에서 발생하지만 JavaScript를 통해 제어됩니다. 두 개의 이미지를 추상 SVG 애니메이션과 혼합하는 재미있는 방법입니다.
다시 말하지만 이것은 실제 웹 사이트에서 많은 목적에 도움이 되지 않을 수 있지만 마스크를 만지작거리는 멋진 실험입니다.
9. SVG BG 마스크
반대로 거의 모든 웹사이트에서 실행할 수 있는 마스킹 효과가 있습니다.
이것은 영웅 헤더와 함께 배경 그라디언트를 사용하여 여전히 완벽하게 혼합되는 복잡한 마스킹 효과를 만듭니다.
개발자 Ryna Rudenko는 HTML에 레이어된 대부분의 마스킹 효과가 있는 원시 캔버스 요소를 사용하여 이 펜으로 봉투를 밀었습니다.
이 마스크는 실용적이고 큰 헤더에서 사용할 수 있을 뿐만 아니라 HTML5 및 CSS3에서만 실행되며 정말 잘 만들어졌습니다. 현대 웹 표준을 잘 활용한 대표적인 예입니다.
10. CSS 및 SVG 마스크
이 완전한 SVG 마스크 갤러리는 순수 CSS로 얼마나 많은 일을 할 수 있는지 보여줍니다.
모두 동일한 사진, 다른 형식을 사용하는 다양한 마스킹 기술을 보여주는 데모입니다. 또한 각 예제에는 페이지에 직접 테스트할 수 있는 샘플 코드가 포함되어 있습니다. 하지만 CodePen의 편집기에서 코드를 복사하는 것만큼이나 쉽습니다.
하지만 이 작은 펜은 여러분이 할 수 있는 다양한 이미지 마스킹 효과에 대한 소개와 같은 역할을 합니다. 간단한 데모를 통해 SVG 및 마스크에 대해 자세히 알아보고 싶다면 시작하기 좋은 곳입니다.