유리 (및 고급) 텍스트 효과

Apple Arcade의 홈페이지에는 멋진 텍스트 효과가 있으며 일부 "흰색"텍스트는 반투명 효과를 보여줍니다. 텍스트를 통해 배경색의 일부를 볼 수 있으며,이 텍스트는 배경색을 표시하는 텍스트를 중공화하는 것과는 다릅니다. 이 예에서는 동적 비디오가 아래에서 재생됩니다. 비디오를 먼저 흐리게 한 다음 편지를 통해 흐릿한 비디오를 표시하는 것과 같습니다.

이것이 바로 실제로 일어난 일입니다.

다음은 실제로 작동 방식을 볼 수있는 비디오입니다 (페이지가 변경 되었거나이 효과를 지원하지 않는 브라우저를 사용하고있는 경우에도).

이 효과가 마음에 들지 않으면 중요하지 않습니다. 이 기사의 나머지 부분은 그것이 어떻게 구현되는지에 대한 기술적 논의입니다.

다음은이 효과를 달성하기 위해 완벽하게 조정 해야하는 두 가지 주요 속성입니다.

1. backdrop-filter
2. clip-path

backdrop-filter 속성은 사용하기가 매우 쉽습니다. 설정하면 해당 요소를 통해 보는 배경을 필터링 할 수 있습니다.

다음으로 텍스트를 해당 컨테이너에 배치하지만 실제로는 숨 깁니다. 접근성을 위해서만 존재하면됩니다. 그러나 결국 우리는 클립 경로를 텍스트로 만들어 텍스트를 대체합니다. 좋아요! 우리는 할 것입니다<clippath></clippath> 요소 내에서 SVG를 사용하십시오<text></text> 그런 다음 backdrop-filter 속성으로 전체 요소를 클립하는 데 사용하십시오.

어떤 이유로 (이것은 버그라고 생각합니다) Chrome은 다음과 같이 렌더링합니다.

두 속성을 모두 지원한다고 말하지만 요소를 올바르게 편집 할 수는 없습니다. @supports 블록을 사용해 보았지만 여기서는 도움이되지 않습니다. Apple의 웹 사이트에는 요소에 .no-backdrop-blur 클래스 (Modernizr-Style)가있는 것처럼 보입니다. 방금 데모 프로그램이 충돌했습니다. 어쩌면 언젠가는 고정 될 것입니다.

Safari에서 바로 보입니다.

Firefox는 현재 backdrop-filter 지원하지 않으므로 @supports 블록은 작업을 수행하고 흰색 텍스트를 제공합니다.

위 내용은 유리 (및 고급) 텍스트 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!