Example code for achieving hollowing effect with pure CSS

I have recently studied the hollowing effect.

background-clip: text

The background is clipped to the foreground color of the text. I first saw this usage on CSS-Tricks: On the CSS-Tricks website, this thing is used everywhere.

In this way, it is no longer difficult to create a simple picture background hollowing effect. There are only a few lines of key code.

.wrapper {
  /* ... */
  background-image: url("/path/to/your/image");
  background-clip: text; /* ! */
  color: transparent; /* ! */
}

Just these few lines will make a big visual change. Before and After Comparison:

In addition, here is a more practical Demo than the above

Since background-clip is from the "background" family, it naturally has to do more with images and gradients. However, the hollowing out we do not always use pictures or gradients. What if we want to create hollow effects for videos, texts, or even more complex DOM elements?

Straight to the point: CSS mask property

This should be the most direct method that can be thought of. After all, the name contains the word “mask”, who can ignore it?

The CSS mask-* properties are defined in CSS Masking Module Level 1. This specification also defines clip and clip-path properties that are well known to many people. In other words, this CSS module includes both masking and clipping.

First example

Although it is a new property, setting the mask property is not difficult. Here is our first example.

<div class="masked" />

.masked {
  height: 100px;
  width: 100px;
  background: linear-gradient(red, orange, yellow, lightgreen, blue, purple, red);
  mask: url("https://github.githubassets.com/pinned-octocat.svg");
}

This is the effect below.

The usage above is still very simple. We specify a mask parameter, whose value is an SVG image stolen from GitHub . The colorful gradient is then clipped and masked to become the famous cat.

mask-* big family

mask attribute is actually an abbreviation of many mask-* :

mask-image
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
-
mask-type
mask-composite
mask-mode

Is there a sense of déjà vu of background-* ? That’s right, many of the properties in it are consistent with background/border, and their functions are also the same, except background-* is used on the background, while mask-* is used on the mask layer - the tricks used on the background can still be used in the world of mask! For example, to achieve this effect:

.masked {
  height: /* ... */;
  width: /* ... */;
  background: /* ... */;
  mask-image: url(https://github.githubassets.com/pinned-octocat.svg);
  mask-size: 5em;
  mask-position: center;
  /* If you are in a good mood, it is okay to add an animation */
}

Further control over masking effects

Readers may have discovered that there are some new faces in mask-* family. This is easy to understand: mask is such a powerful feature, it would be a pity to completely copy background-* .

mask-mode

mask-mode is used to specify the specific masking mode.

The mask-type CSS property sets whether mask-image is used for a "brightness-type" mask or an "opacity-type" mask. mask-mode: alaph means using opacity (ie alaph channel) as mask value, and mask-mode: luminance means using brightness value as mask value.

So, what is the mask value? The mask value indicates the degree to which the masked element is masked. The larger the mask value, the more the masked area will be revealed. When the mask value is the largest, the area will be completely opaque. For example:

<div class="mode">ABCDEFG</div>

.mode {
  height: 200px;
  width: 300px;
  /* and more */
  mask-image: linear-gradient(to left, black, yellow);
  mask-mode: luminance; /* or alaph ? */
} 

The left side is the mask image, the middle is luminance and the right side uses alaph . The image here is opaque, so using a permanently opaque image as a mask in alaph mode will result in no masking effect. However, the image has brightness changes, so the masked elements under luminance show changes in transparency.

Generally, luminance mode is a little slower because the brightness value of each pixel needs to be calculated based on the values ​​of the three RGB channels.

mask-composite

Specifies how to handle the mask effect when multiple mask images are superimposed. The effects of some property values ​​depend on the order of the mask-image hierarchy.

Try this CodePen from MDN

That’s all about mask . For more specific and accurate explanations, please visit MDN .

Blending Mode

This should be the most magical method. When using PS, you often see the term "blending mode". I remember when I first used Photoshop many years ago, I was very curious about what "blending modes" were, which immediately filled me with awe for Photoshop. However, despite the awe we felt back then, the "hybrid model" mentioned here now is quite easy to understand.

The so-called "blending mode" refers to the method of calculating the final color value of a pixel when layers overlap. Each blend mode receives a foreground color value and a background color value (top color and bottom color, respectively) as input, performs some calculations, and outputs the final color value to be displayed on the screen. The final visible color is the result of the blending mode calculation performed on each overlapping pixel in the layer. To put it simply, the blending mode determines what happens when you add one layer to another.

In CSS, you can use mix-blend-mode to specify the blending mode.

You may ask, I don’t usually use anything like “blending mode”, so is the default value of blend-mode none ? Yes. In fact, this most common situation where the upper layer "covers" the lower layer also belongs to a blending mode called normal . It is essentially a blending mode that only retains the foreground color value and completely discards the background color value.

Here we only discuss the blending mode used to achieve the hollowing effect - screen . This blending mode has a characteristic that if the foreground layer is black, the final visible color is directly the color of the background layer; if the foreground layer is white, the final visible color is directly white.

I believe you have already figured out what this has to do with hollowing out. Let’s take a look at an example.

Now, we have a <video> and a "black text on white background" logo overlay.

We add the following CSS to the floating frame:

.logo {
    /* ... ... */
    mix-blend-mode: screen;
}

It becomes the following:

Go to this Demo to see the specific code and effects

The gear icon has indeed become hollow. But why?

Let’s make one thing clear first: put the floating layer above the video, the floating layer is the “foreground” and the video is the “background”. Let’s first look at the white part of the floating layer. Since placing white on top of any color will result in white, the white part is retained; and since placing black on top of any color will result in the color of the underlying layer, the black part appears hollowed out.

However, this implementation is a bit of a hack, because only black and white are used here. If other colors are used as background-color of the floating layer, the effect will not look like a hollowing out effect. In this case, mask family mentioned above will still have to come into play. However, for the white background situation alone, mix-blend-mode is still a feasible solution.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.