This is the 11th day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Today, UI girl proposed an effect, requiring that there is text on the top of the video, only the text part can see the following video, but the non-text part can not see the video, similar to the mask effect in PS. I thought, what’s the point of this video? But looking at UI sister fluttering looking forward to the big eyes, I did not say their thoughts, but said: into, wait and see!

Was so assured because before seen similar effects on codepen, just pictures and words the mask effect, which USES a special interesting CSS properties, so to implement or very simple, I can get this done in a few minutes, come with me, based on the attributes to do a cool mask effect ~ pure CSS video text

Mix – blend – mode attribute

The most important attribute to achieve the mask effect is the mix-blend-mode attribute, which describes how the element’s content should blend with the content of the element’s immediate parent element and the element’s background. Is not to see not quite understand a face meng? That’s ok, let’s take a look at its property values:

mix-blend-mode: normal; / / normal

mix-blend-mode: multiply; // Multiply

mix-blend-mode: screen; / / screen

mix-blend-mode: overlay; / / overlay

mix-blend-mode: darken; / / darker

mix-blend-mode: lighten; / / gets brighter

mix-blend-mode: color-dodge; // Color dodge

mix-blend-mode: color-burn; // Color darkens

mix-blend-mode: hard-light; / / light

mix-blend-mode: soft-light; / / light

mix-blend-mode: difference; / / difference

mix-blend-mode: exclusion; / / out

mix-blend-mode: hue; / / hue

mix-blend-mode: saturation; / / saturation

mix-blend-mode: color; / / color

mix-blend-mode: luminosity; / / brightness

mix-blend-mode: initial; / / the initial

mix-blend-mode: inherit; / / inheritance

mix-blend-mode: unset; / / recovery

Is it more muddled? Ha ha ha 😵 if you have a PS basic partner should be easy to understand the meaning of the above attributes, if not it doesn’t matter, you can try one by one effect.

From the above attributes we can judge a lot of online website photo filters, is also based on this attribute to make, so the application is very wide. With the above attributes in mind, let’s build the HTML structure:

DOM structure

The STRUCTURE of the DOM page should be a box that contains a video and a piece of text, and the text and video should overlap, and both should fill up the box, so THE box is relatively positioned, and the text and the video are absolutely positioned, and they should fill up the box. Because the text should be above the video, the text p tag should be below the video tag. So the first thing I wrote was this:

  <style>
    .box{
      width: 700px;
      height: 500px;
      position: relative;
    }
    video.p{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    p{
      font-size: 200px;
      font-weight: 700;
      line-height: 500px;
      text-align: center;
      background: white;
    }
  </style>
  <div class="box">
    <video autoplay muted loop preload poster="https://www.apple.com.cn/v/iphone-12/g/images/overview/camera/night_mode_01__dg8mk3qbqhci_large.jpg">
      <source src="https://www.apple.com.cn/105/media/us/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/video/large_2x.mp4" />
    </video>
    <p>PEPSI</p>
  </div>
Copy the code

Let’s run this:

Aha, that’s half the battle. Let’s add mix-blend-mode: screen to the p tag; Have a look at:

We’re done!!

Of course, as a good front-end developer, even for a small demo, we have to do it as well as possible. For example, the current font looks ugly, so I want to change it.

@ the font the forum rules

< font style = “font-size: 10.5pt; font-family: arial, sans-serif; font-size: 10.5pt; W3school has a detailed description of its property values. Here, let’s take a brief look at its Settings:

The font-family required. Specifies the name of the font.

The SRC required. Define the URL of the font file.

Isn’t that simple? I went to alibaba vector icon library iconfont- Webfont platform to find an online font, some introduction Settings:

  <style>
    @font-face {
      font-family: 'webfont';
      src: url('//at.alicdn.com/t/webfont_9fm5seiutdt.eot?#iefix') format('embedded-opentype'), url('/ / at.alicdn.com/t/webfont_9fm5seiutdt.svg# Ren Dong Yang bamboo stone body - Bold') format('svg');
    }
    .box{
      width: 700px;
      height: 500px;
      position: relative;
    }
    video.i {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    i{
      display: block;
      font-family: webfont;
      font-size: 200px;
      font-weight: 700;
      line-height: 500px;
      text-align: center;
      background: white;
      mix-blend-mode: screen;
    }
  </style>
  <div class="box">
      <video autoplay muted loop preload poster="https://www.apple.com.cn/v/iphone-12/g/images/overview/camera/night_mode_01__dg8mk3qbqhci_large.jpg">
          <source src="https://www.apple.com.cn/105/media/us/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/video/large_2x.mp4" />
      </video>
    <i class="web-font">PEPSI</i>
  </div>
Copy the code

The effect is as follows:

Perfect!

Afterword.

Have to say, CSS is very powerful, many unexpected scenes and effects can be easily implemented with CSS. In the past, I would have said that I couldn’t do it on the front end, I would just have to cut the UI, but today I managed to install one. After all, it looks like a complicated effect. Who would have thought that you could do it with just one property?

PS: Today is the 11th day for me to participate in the Denver Nuggets challenge, Friday is still working hard on the article, it has been 11 days! Where there is a will, there is a way. Come on, everybody

The list of more challenging articles is as follows:

  • Flex layout container elements and project elements attributes
  • 2021.06.02 how to play with CSS Gradient Background
  • How to Use SVG to create Text Effects along Arbitrary Paths
  • 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
  • Git Commit Specification for team management: How many people don’t write commit records?
  • 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
  • 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
  • On Prototypes and Prototype Chains in 11 Aspects
  • A Closer Look at JavaScript scope and Scope Chains
  • What exactly is a closure in JavaScript