• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

I don’t know if you see that very often.

This effect is called the frosted glass effect. Apple users will be familiar with this design.

Context Gorgeous backdrop Backdrop filter is a custom CSS property for frosted glass. That’s why I used the word “shiny hair” in the title.

backdrop-filter

There is also a property called filter in CSS, and the two properties are syntactically identical.

Filter applies the effect to the element itself, and backdrop filter applies the effect to the element’s background.

Let’s take a look at the syntax on MDN:

/ / uploadable-filter: none; / / uploadable-filter: none; / / uploadable-filter: none; / / uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables/uploadables /* <filter-function> specifies the name of the bridge. backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* filters. Svg# filter: url(filters. Svg# filter) blur(4px) saturate(150%); / / mayday-filter: inherit; / / mayday-filter: inherit; backdrop-filter: initial; backdrop-filter: unset;Copy the code

Frosted glass

Note: Elements or their backgrounds must be at least partially transparent.

structure

<div class="container">
  <div class="card">Life doesn't have to be perfect， but to be wonderful</div>
</div>
Copy the code

The container style

.container{
         position: relative;
         width: 1000px;
         height: 800px;
         background: url(./bk.jpg);
         background-repeat: no-repeat;
   }

Copy the code

Card style

Blur: backdrop backdrop backdrop-filter: backdrop backdrop (10px);

.card{
     position: absolute;
     top: 50%;
     left: 50%;
     height:50px;
     line-height: 50px;
     backdrop-filter: blur(10px);
     transform: translate(-50%, -50%);
     padding: 0 20px;
 }

Copy the code

Photo background

For the following effect, let’s analyze it. First the image is on the upper layer and the lower layer is a blurred background.

<div class="bkImg">
  <img src="" class="Img"/ > < /div>
Copy the code
 .bkImg {
        background-color: #222;
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100vh;
        width: 100%;
        position: relative;
        background-image: url();

        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .Img {
        position: relative;
        max-height: 90%;
        max-width: 90%;
        z-index: 1;
      }
Copy the code

Now it looks like this: the background is not what we expected, here we have a background of an image, and this image is an image of the image above. If we use the backdrop backdrop filter directly on the div, it will be possible. We made that clear in the last example. Element or element background should be transparent or have no background at all.

At this point we will consider adding after.

  .bkImg::after {
    backdrop-filter: blur(50px);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }
Copy the code

Add some animation – Sunrise east

Sunrise background

<div class="card">
</div>
 .card {
      background-color: #f5f5f7;
      padding-top:150px;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 64px 94px;
      position: relative;
    }
Copy the code

The sun

<div class="card">
  <div class="sun"></div>
  <div class="bk"></div>
</div>

.sun {
  position: absolute;
  top: 150px;
  width: 130px;
  height: 130px;
  background-color: #ff6260;
  border-radius: 50%;
  animation: sunRise 5S;
}

.bk {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: green;
  padding-top: 64px;
  padding-bottom: 8px;
  height: 130px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 32px;
  backdrop-filter: blur(20px);
}
Copy the code

Combined with animation

@keyframes sunRise{ 0%{ top:150px } 100%{ top:0px; }}Copy the code

The effect

Afterword.

The pictures in the preface come from the station cool, the author has used CSS to achieve, there is a need for children’s shoes, you can get in the comment area.