A Glassy (and Classy) Text Effect

There is a cool text effect on Apple Arcade's homepage, with some "white" text showing a translucent effect. You can see a part of the background color through the text, which is different from hollowing out text, which displays the full background color. In this example, the dynamic video is played below. It's like blurring the video first and then displaying the blurred video through the letters.

This is exactly what actually happened.

Here is a video where you can see how it actually works (even if they have changed the page, or you are using a browser that does not support this effect):

If you don't like this effect, it doesn't matter. The rest of this article is a technical discussion of how it is implemented, not a statement when and how it is used.

Here are two main properties that must be perfectly coordinated to achieve this effect:

1. backdrop-filter
2. clip-path

backdrop-filter property is very easy to use. Set it, it can filter any background you see through that element.

Next, we place the text in that container, but we actually hide it. It only needs to exist for accessibility. But eventually we replace the text by creating clip paths with text. That's right! We will<clippath></clippath> Use SVG within the element<text></text> , and then use it to clip the entire element with backdrop-filter attribute.

For some reason (I think this is a bug), Chrome renders as follows:

Even though it is said to support both properties, it cannot edit the elements correctly. I tried using @supports block, but this doesn't help here. It looks like Apple's website has a .no-backdrop-blur class (Modernizr-style) on its elements, which is set on Chrome to avoid using the effect altogether. I just made my demo program crash. Maybe one day it will be fixed.

Looks right in Safari:

While Firefox does not currently support backdrop-filter , so @supports block will do its operations and give you white text.

The above is the detailed content of A Glassy (and Classy) Text Effect. For more information, please follow other related articles on the PHP Chinese website!