preface

(December 13) is national Memorial Day 🕯️🙏

When I opened station B today, I saw a gray area. On this day, every one of us should pay tribute to history, remember history, love the motherland and forge ahead

Now, from a technical point of view, how is this ash achieved

First, the professional subconscious turns to the console. Why is that? Is to see how to implement, is CSS custom properties? Is it introducing a CSS? Does the preprocessor modify global variables? As a result, I open the console, browse, and finally locate a line of CSS code. When I close it, it turns into color

filter: grayscale(100%).Copy the code

As a result, let’s take a look at the specific value of the filter effect.

Results the preview

Write a script to iterate through all the properties and see what happens:

    const url = "https://www.baidu.com/img/[email protected]";
    let html = ""; [{name: "Gray 100%".style: "grayscale(100%)"
      },
      {
        name: "Fuzzy 5 px".style: "blur(5px)"
      },
      {
        name: "3x brightness".style: "brightness(300%)"
      },
      {
        name: "200% contrast".style: "contrast(200%)"
      },
      {
        name: "200% saturation".style: "saturate(200%)"
      },
      {
        name: "Hue rotation 180 degrees.".style: "hue-rotate(180deg)"
      },
      {
        name: "100% of the color".style: "invert(100%)"
      },
      {
        name: "50% transparency".style: "opacity(50%)"
      },
      {
        name: "Shadow".style: "drop-shadow(10px 5px 5px #f00)"
      },
      {
        name: "100% transparency".style: "opacity(100%)"
      },
      {
        name: "70% brown".style: "sepia(70%)"
      }
    ].forEach(({ name, style }) = > {
      html += `<div>${name}-${style}: <img src=${url} style="filter: ${style}" /></div><br />`;
    });
    document.body.innerHTML = html;
Copy the code

Preview effect:

Can support multiple filter combination oh

Start using your imagination

Frosted glass effect

When you see the blur effect, you immediately think of the cool frosted glass effect on the MAC. So, let’s repeat:

Implementation method: first cover the full screen background, and then carry the main content of the element translucent, and there is a pseudo-element, this pseudo-element also has a background-attachment: fixed background, and add blur to it to achieve

    .bg..container::before {
        background-image: url("Http://img2.imgtn.bdimg.com/it/u=1737072847, & FM = 26 & gp = 0. 1699534261 JPG");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
      }
      .bg {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
      }

      .container::before {
        content: "";
        filter: blur(20px);
        z-index: -1;
      }

      .container {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 30px;
        /* Transform will be a tragedy */
        left: calc(50% - 250px);
        top: calc(50% - 200px);
      }

      .container..container::before {
        width: 500px;
        height: 400px;
        position: absolute;
        border-radius: 8px;
      }

Copy the code
  • Background – attachment: fixed. This will keep the background fixed relative to the window, otherwise the image will normally start in the top left corner of your box instead of looking like this
  • Calc (50%-250px) center: Using transform, the offset will cause the background and content of the pseudo-element to be inconsistent and will be difficult to tune

The rest of the HTML code is simple:

    <main class="bg"></main>
    <section class="container">
      i am lhyt
    </section>
Copy the code

A fuzzy shadow

Most of the time, box-shadow is used to create a simple shadow, but blur can also be used. Put the same image under the image and blur it, then offset it a little bit to make it a shadow.

.shadow..shadow::before {
        width: 500px;
        height: 400px;
        background: url("Http://img2.imgtn.bdimg.com/it/u=1737072847, & FM = 26 & gp = 0. 1699534261 JPG")
          no-repeat;
        background-size: cover;
      }
      .shadow {
        position: relative;
      }
      .shadow::before {
        content: "";
        display: block;
        position: absolute;
        filter: blur(20px);
        z-index: -1;
        top: 20px;
        left: 20px;
      }
Copy the code

If the Fliter plus brightness(0.5) is a black shadow. HTML is just one element, nothing to talk about.

Automatic gradual color change

Remember some of the Screensavers on Windows that changed color all the time? The same effect can also be achieved with the HUE hue-rotate CSS filter

      @keyframes auto_change_color {
        from {
          filter: hue-rotate(0);
        }

        to {
          filter: hue-rotate(360deg); }}.container {
        background-image: url("Http://img2.imgtn.bdimg.com/it/u=1737072847, & FM = 26 & gp = 0. 1699534261 JPG");
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: auto_change_color 5s linear infinite;
      }

Copy the code

From the abstract to the concrete

By modifying the previous blur and adding some offsets and contrast changes, you can achieve an image Mosaic effect that gradually moves from abstract to concrete:

      @keyframes shadow_move {
        from {
          top: 400px;
          left: 400px;
          filter: blur(20px);
        }

        to {
          top: 0;
          left: -250px;
          filter: blur(0); }} @keyframes container_move {
        from {
          top: 0;
          filter: blur(20px);
          left: 0;
        }

        to {
          top: 200px;
          left: 400px;
          filter: blur(0); }} @keyframes body_contrast {
        from {
          filter: contrast(20);
        }

        to {
          filter: contrast(1); }}.shadow..shadow::before {
        width: 250px;
        height: 400px;
        background: url("Http://img2.imgtn.bdimg.com/it/u=1737072847, & FM = 26 & gp = 0. 1699534261 JPG")
          no-repeat;
        background-size: cover;
      }
      .shadow {
        position: relative;
        animation: container_move 20s infinite ease;
        background-position-x: -250px;
      }
      .shadow::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        animation: shadow_move 20s infinite ease;
      }

      body {
        animation: body_contrast 20s infinite ease;
      }
Copy the code

lightning

In ordinary life, lightning is usually from a very thin light to a very thick light. This process can be simulated using Brightness. Now let’s do a lightning strike effect


    @keyframes lighting {
        from {
          filter: brightness(0);
        }

        to {
          filter: brightness(100%). }} @keyframes light {
        from {
          filter: brightness(100%);
        }

        to {
          filter: brightness(300%). }}.light {
        background: url("Https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3951629719, & FM = 26 & gp = 0. 2497770173 JPG")
          no-repeat;
        width: 463px;
        height: 400px;
        animation: lighting 0.5 s linear infinite;
      }
      .container {
        background-image: url("Http://img0.imgtn.bdimg.com/it/u=2309502909, & FM = 26 & gp = 0. 4210960075 JPG");
        background-repeat: no-repeat;
        background-size: cover;
        width: 300px;
        height: 300px;
        animation: light 0.5 s linear infinite;
        position: absolute;
        left: 250px;
      }
Copy the code

html:

  <body>
    <section style="filter: contrast(20); background-color: #000">
      <div class="light"></div>
    </section>
    <section style="filter: contrast(20); background-color: #000">
      <div class="container"></div>
    </section>
  </body>
Copy the code

Pay attention to the public account “Different front-end”, learn front-end from a different perspective, grow fast, play with the latest technology, explore all kinds of black technology