One line of CSS code to achieve the integration of avatar and national flag

It’s National Day, and everyone is eager to celebrate the birthday of our motherland.

Every year at this time, it becomes popular to decorate your profile picture with the national flag on WeChat Moments, and this year the trend is this:

Emm, very good.

So, how can we use CSS to easily combine a flag image with our avatar and quickly get the desired avatar?

Some people think that it is to change the transparency of one of the pictures, but it is not. If you look closely at the synthesized avatars, you can basically only see the red flag on the far left and not the original avatar content, while on the far right you can basically only see the avatar and no longer see the red background of the red flag.

Use mask in CSS to merge the avatar and the national flag with one line of code

In CSS, we only need to overlay two images and use the mask attribute on the upper image. This effect can be achieved with just one line of code.

div {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    // Normal avatar background: url(image1) no-repeat;
    background-size: cover;
}
.div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // Flag image background: url(image2) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}

In the above code, we use div and its pseudo-element div::after to overlay the avatar and the national flag.

We only need to set a layer of mask mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent) in div::after , and we can achieve the clever overlap of the avatar and the national flag:

A brief introduction to Mask

In CSS, the mask property allows users to hide part or all of an element's visible area by masking or cropping an image to a specific area.

The most basic way to use a mask is with an image, like this:

{
    /* Image values ​​*/
    mask: url(mask.png); /* Use bitmap as mask*/
    mask: url(masks.svg#star); /* Use the shape in the SVG graphic as a mask*/
}

Of course, the method of using pictures is actually more complicated, because we must first prepare the corresponding picture materials. In addition to pictures, mask can also accept a parameter similar to background, that is, gradient.

Similar to the following usage:

{
    mask: linear-gradient(#000, transparent) /* Use gradient as mask*/
}

The following picture is superimposed with a gradient from transparent to black.

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
} 

After applying the mask, it becomes like this:

This DEMO can give you a brief understanding of the basic usage of mask.

Here we get the most important conclusion of using masks: the overlapping part of the image and the gradient transparent generated by the mask will become transparent.

It is worth noting that the gradient above uses linear-gradient(90deg, transparent, #fff) . The #fff solid color part here can actually be replaced with any color without affecting the effect.

CodePen Demo -- Basic usage of MASK

Other tips for using Mask

Of course, once you master the Mask, you can play with it in many ways.

For example, for the flag avatar above, we can use CSS @property to achieve some interesting hover effects:

Or use masks to achieve some interesting transition effects:

Even the characters blocking the bullet screen on the bullet screen website are all achieved by using CSS mask:

If you want to learn more about CSS MASK, you might as well read these two articles carefully:

Magical CSS MASK

Use mask to implement video bullet screen character mask filtering

This is the end of this article about how to use one line of CSS code to integrate the avatar and the national flag. For more relevant content about CSS integration of avatar and national flag, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!