# 2021 Different CSS Gameplay (part 1)

Long time no see, it has been a long time since I have written a blog. The previous blog is all about writing principles, framework ideas and algorithms. Today, while taking advantage of the weekend, let’s do something different. In recent years, although the iteration of CSS is slow, but also a lot of nice new features, let’s take a look

In this article, we mainly explore the following attributes:

filter
box-reflect
css variable
aspect-ratio
gap

filter

As the name suggests, the meaning of the filter is to filter, filters, we all know, the autodyne is not add a filter is what, what is black and white, color, filters, restoring ancient ways filter is the color of the control of an element to produce offset (said popular point is to give you change color), know the meaning, we probably see filter should be how to play

This thing can fill in more properties, let’s play one by one

`The filter: the blur () : fuzzy`

When we add a filter: blur to an element, it gives the element a Gaussian blur:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>css new features</title>
  <style>

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f5f5f5;
    }

    /* filter: blur */
    .container {
      width: 400px;
      height: 400px;
      background-color: # 000;
      /* The key is this line of code, without this line of code, we all know what the page would look like */
      filter: blur(10px); 
    }

  </style>
</head>
<body>
  <div class="container""></div>
</body>
</html>
Copy the code

When filter: blur is added, the effect is as follows

The higher the value of blur, the higher the degree of blur, and the lower the value of blur, the lower the degree of blur

Okay, so what can we do with this property? The most common is ground-glass in enterprise development

<! Container --> Container --> Container --> Container.<style>
  .container {
    width: 380px;
    height: 210px;
    background-color: # 000;
    filter: blur(2px);
    background-image: url(https://game.gtimg.cn/images/lol/act/img/skin/big134005.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: #fff;
    line-height: 210px;
    font-size: 24px;
    font-weight: bold;
    font-family: Consolas;
  }
</style>.Copy the code

The effect is as follows. In the past, we used to deal with ground-glass effects with a lot of JS logic, or also need UI graphics, now a CSS property for you to do, often nice

When we add text to the container element, the text is blurred out. What if we don’t want this effect? After and before were used to cover the location, but CSS officials also wanted to provide the backdrop, so they introduced The Backdrop filter. For example, if you want to use a context-specific backdrop, you can specify a context-specific backdrop as well as a context-specific backdrop, and then you can specify a context-specific backdrop as well as a context-specific backdrop, and then you can specify a context-specific backdrop as well as a context-specific backdrop

.<style>
  .container{.../* filter: blur(2px); Let's comment out this line of code */. }/* Configure the backdrop for the filter-box */
  .filter-box {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);    
  }
</style>.<! -- So we have to change the structure -->
<div class="container"">
  <div class="filter-box">hello, world</div>
</div>.Copy the code

This time the effect is as follows, is not very nice

`Filter: grayscale () : gray`

When we take a picture, we sometimes change it to black and white, and Filter: GrayScale does that for us. Let’s see how we use it

The parameter value of grayScale () is a percentage, and the higher the percentage, the higher the grayscale value (the higher the grayscale value, the closer to black and white)

With this property, we can achieve some effect of changing color to black and white photos after hover, similar to giving an active state. See an example

Copy the code

The effect is as follows, really no problem

`Filter: Hue -rotate(): hue changes`

What color is that change, we are not professional UI, shallow understanding of words you can say is the color hue value transform (from red to green is the color change, for example), in the past, if we want to implement a box, the infinite change color, we need to gathering in JS logic to generate random RGB color values, now, With Hue-rotate, we’ve turned ourselves into the master, and we’re looking at the power of hue change

.<style>
  .container {
    width: 200px;
    height: 200px;
    background-color: green;
    animation: hueRotateAnimate 6s linear infinite;      
  }

  @keyframes hueRotateAnimate {
    0% {
      filter: hue-rotate(0)}100% {
      filter: hue-rotate(360deg); }}</style>.<div class="container">
</div>
Copy the code

The filter: Hue-rotate method is actually implemented with filter: Hue -rotate method

`Filter: contrast(): contrast`

Contrast is something I believe you are familiar with, the higher the contrast, the greater the color difference, the lower the contrast, the smaller the color difference, when the contrast is 0 we can directly look at the effect

.<style>
  .container {
    width: 200px;
    height: 400px;
    position: relative;
    display: flex;
  }
  
  .container .building-bg..container .real-building {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./oldBuilding .png);
  }

  .building-bg {
    /* We set the contrast of the left div background to 0 */
    filter: contrast(0);
  }
</style>

<div class="container"">
    <div class="building-bg"></div>
    <div class="real-building"></div>
</div>.Copy the code

In the above code, both divs are essentially in the same background, but the result is as follows

So what we can do with this effect, I don’t know if you’ve ever done that irregular shape border, it’s really hard to do, most of the time, this is just a UI drawing, we use it directly, but with this property, we can do it ourselves, so let’s change the style code above

.container {
  width: 200px;
  height: 400px;
  position: relative;
}

.container .building-bg..container .real-building {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(./ Ancient Building \.png);
}

.building-bg {
  filter: contrast(0);
}

/* Add this paragraph */
.container  .real-building {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 92%;
  height: 92%;
}
Copy the code

The result is as follows, is not very nice

`Filter: URL (): SVG filter (this is less used, but very powerful)`

We know that SVG is a very powerful thing, and this guy can help us draw many graphics and even ICONS. The power of filter: URL is that it allows you to use SVG as the filter value, which you may not understand here, if you know enough about SVG

Below I want to do an example, this example needs some preknowledge, you can learn to learn, or you can directly over the filter: URL this piece, because he usually used is not much, but because he is very, very powerful, can make very cool effects, so I still take out to say

The pre-knowledge is as follows:

SVG tag: developer.mozilla.org/en-US/docs/…

FeTubulence tags: developer.mozilla.org/en-US/docs/…

Filter tags: developer.mozilla.org/en-US/docs/…

Animate label: developer.mozilla.org/en-US/docs/…

So let’s write some code

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Ring of Fire</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: # 000;
    }

    .circle {
      position: relative;
      width: 600px;
      height: 600px;
      filter: url(#wavy) blur(1px);
    }

    .circle::before {
      content: "";
      position: absolute;
      top: 100px;
      left: 100px;
      bottom: 100px;
      right: 100px;
      border: 20px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 50px #0f0.0 0 50px #0f0 inset;
      animation: changeColorAnimate 5s linear infinite;
    }

    .circle::after {
      content: "";
      position: absolute;
      top: 100px;
      left: 100px;
      bottom: 100px;
      right: 100px;
      border: 20px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 50px #fff.0 0 50px #fff inset;
    }

    svg {
      width: 0;
      height: 0;

    }

    @keyframes changeColorAnimate {
      0% {
        filter: hue-rotate(0deg)}100% {
        filter: hue-rotate(360deg)}}</style>
</head>
<body>
  <div class="circle"></div>
  <div class="circle"></div>
  <svg>
    <filter id="wavy">
      <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" seed="2">
        <animate attributeName="baseFrequency" dur="60s" values="0.02; 0.005; 0.02" repeatCount="indefinite" />
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="30" />
    </filter>
  </svg>
</body>
</html>
Copy the code

He achieved the following effect, brother, this you say cool not cool cow not cow force, this is also combined with a part of our above knowledge

In fact, there are a lot of properties of the filter, I just give some examples of the most commonly used and the most helpful ones. In fact, we know that there are many operations for the filter, such as exposure, saturation, transparency and so on, and all of these operations give us different values of the attributes. If you are interested in it, you can go to MDN and look it up

Filter MDN link: developer.mozilla.org/en-US/docs/…

At the same time, we must pay attention to a filter compatibility

box-reflect

I don’t know if you have any need for reflection, but you may see it in some products that need rich visual effects. Box-reflect is here to help us realize this function. Although it is still an experiment phase, it is also a trend of future function, and it is really convenient. Now the W3C has officially incorporated the draft

This property receives several parameters, similar to border:

The first argument is the direction of the projection (above.below.left.rightFour values are optional)
The second parameter: the distance between the projection and the object
The third parameter: this parameter controls what the projection is (this means it doesn’t have to be a reflection of the real thing, it can be something else).

.<style>
  .container {
    width: 200px;
    height: 200px;
    background-color: # 000;
    -webkit-box-reflect: below 1px linear-gradient(transparent, # 000);
    /* As the third parameter, you can also fill in the URL (the path you want to display)
  }
</style>

<div class="container"">
</div>.Copy the code

The page looks like this, and we can see a reflection

So what can we do with this thing, combined with some other things? There are a lot of things that can be done, depending on whether you like to think about it, including some font flickering reflection effects like Netflix

.<style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(94.29.29);
      min-height: 100vh;
    }
    
    .container {
      font-family: Menlo;
      font-size: 6rem;
      color: rgb(138.15.15);
      width: 100%;
      text-align: center;
      letter-spacing: 15px;
      -webkit-box-reflect: below 1px linear-gradient(transparent, # 000);
      line-height: 5rem;
      animation: animate 5s linear infinite;
      font-weight: bold;
    }


    @keyframes animate {
      0%.18%.20%.50.1%.60%.65.1%.80%.90.1%.92% {
        color:rgb(138.15.15);
        text-shadow: none;
      }
      18.1%.20.1%.30%.50%.60.1%.65%.80.1%.92.1%.90%.100% {
        color: #fff;
        text-shadow: 0 0 10px firebrick,
        0 0 20px firebrick,
        0 0 40px firebrick,
        0 0 80px firebrick,
        0 0 160pxfirebrick; }}</style>.<div class="container">Netflix</div>. .Copy the code

The effect is as follows, isn’t it cool, very nice

One support for box-reflect is as follows

css variable

Less, Sass and even post-CSS I believe everyone is not unfamiliar, they mainly solve a problem? The most important is a CSS writing method and CSS variables, there may be a use of CSS modules, and the W3C official has long been aware of these, this is not, CSS variables come

.<style>.:root {
    /* All variables declared under :root are global */
    --container-bg-color: #07252d;
  }

  .container {
    /* If a variable is declared inside a container, it can only be used inside the container */
    --container-bg-color:red;
    width: 200px;
    height: 200px;
    /* We use var syntax to use the variable */
    background-color: var(--container-bg-color);
  }
</style>
Copy the code

This time a red div box is produced, we know that such as less, sass and other need to build tools, and they are using JS I/O processing of files, this will have a greater impact on the development of hot update performance, if the OFFICIAL CSS can support this thing, it is really pretty tasty

Similarly, CSS variable support is as follows

aspect-ratio

Let’s imagine a scenario where the product manager comes to you and says, we’re doing mobile, this parent container I don’t care what the outside screen size is, you’re always going to give me a 16:9 display area, right

This requirement is not cracked, but if we use Vue or React, we need to use computed or useMemo to calculate some values in real time, which actually increases our logic complexity. Aspect-ratio is for this kind of scenario

<style>..container {
    /* When we use aspect-ratio, we want it to vary according to the size, so we don't have to give a fixed height */
    width: 100%;
    background-image: url(https://game.gtimg.cn/images/lol/act/img/skin/big51010.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 16 / 9; }...</style>.<div class="container"></div>
Copy the code

At this time, we will find that no matter how our viewport size changes, the entire container area will always maintain the same 16:9 size, which is something you couldn’t do with CSS in the past

At the same time, we can also conduct media queries on aspect-ratio. We can choose how to display content under different viewport proportions. When there is no aspect-ratio, the responses we make to viewport are generally constrained by the specific PX range. With aspect-ratio media queries, our constraints for mobile are much more precise

/* For different viewport sizes, use the most accurate style control */
@media (aspect-ratio: 16/9) {
  div {
    background: #9af; }}@media (aspect-ratio: 4/3) {
  div {
    background: #9ff; }}Copy the code

The compatibility of aspect-ratio is as follows

gap

I’m sure you’ve all come across this demand on a daily basis: There are a lot of elements, we need to arrange them neatly, similar to taobao products, and then the products want a little space between them. In the past, we achieved such effect, nothing more than flex layout plus Margin of Flex child elements, in fact, there will be a lot of problems. We need to write more code to fix these problems, and now we can use gap

<style>
  .container {
      display: flex;
      width: 400px;
      height: 600px;
      border-radius: 8px;
      border: 2px solid gray;
      justify-content: space-between;
      /* gap */
      gap: 2%;
      padding: 1%;
      box-sizing: border-box;
      /* If the Flex container has more than one line, your align-items will not work. You must use align-content */
      align-content: baseline;
      flex-wrap: wrap;
    }

    .container div {
      width: 48%;
      aspect-ratio: 2 / 1;
      background-repeat: no-repeat;
      background-position: center; 
      background-size: contain;     
    }

    .Vayne {
      background-image: url(https://game.gtimg.cn/images/lol/act/img/skin/big67014.jpg);
    }

    .Cassiopeia {
      background-image: url(https://game.gtimg.cn/images/lol/act/img/skin/big69003.jpg);
    }

    .Caitlyn {
      background-image: url(https://game.gtimg.cn/images/lol/act/img/skin/big51010.jpg);
    }

    .Azir {
      background-image: url(https://game.gtimg.cn/images/lol/act/img/skin/big268005.jpg);
    }

    .Oriana {
      background-image: url(https://game.gtimg.cn/images/lol/act/img/skin/big61007.jpg);
    }

</style>.<div class="container"">
    <div class="Cassiopeia"></div>
    <div class="Caitlyn"></div>
    <div class="Vayne"></div>
    <div class="Azir"></div>
    <div class="Oriana"></div>
  </div>.Copy the code

The result is the following, almost effortless implementation of an adaptive streaming layout

One compatibility of GAP is as follows

Write in the end, in fact, there are a lot of new features of CSS, today to write here, the author will go to sweep the floor, I hope these things can be helpful to everyone’s daily development and less detours, on the other hand, we also need to keep exploring and curious about new things, new things are always better, Curiosity and learning ability are also the basic qualities of not being eliminated by the industry. I will share the middle part next week, and the next part the week after that

# 2021 Different CSS Gameplay (part 1)

filter

The filter: the blur () : fuzzy

Filter: grayscale () : gray

Filter: Hue -rotate(): hue changes

Filter: contrast(): contrast

Filter: URL (): SVG filter (this is less used, but very powerful)

box-reflect

css variable

aspect-ratio

gap

Related Posts

Js handwritten bind() function

Webpack Learning Series (13)/ Optimize vUE project construction speed/WebPackchain (continuously updated)

Day 44: Understand ECMAScript data type conversions (2)

`The filter: the blur () : fuzzy`

`Filter: grayscale () : gray`

`Filter: Hue -rotate(): hue changes`

`Filter: contrast(): contrast`

`Filter: URL (): SVG filter (this is less used, but very powerful)`