This is the 7th day of my participation in the August More Text Challenge

Today update a CSS, are some of the technical is not strong, very practical things!

Translucent border

Look at the finished product first

Look at the code

<div class="wrapper">
  <div class="main">Translucent border</div>
</div>

<style>
  .wrapper {
    padding: 1em;
    background-color: #327FEB;
  }
  .main {
    padding: 0.5 em;
    color: #fff;
    border: 10px solid hsla(0.0%.100%.0.5);
  }
</style>
Copy the code

The core is the hSLA function, which is illustrated in the following figure:

Rounded edges inside the border

Look at the finished product first

Look at the source code

<div class="wrapper">
  <div class="main">Rounded edges inside the border</div>
</div>

<style>
  .main {
    padding: 0.5 em
    border-radius: 10px;
    outline: 10px solid #327FEB;
    box-shadow: 0 0 0 10px #327FEB;
  }
</style>
Copy the code

Start with a rounded corner for Main and use the Outline property, which renders a rectangle regardless of whether the element is square or round. Use the fourth property of box-shadow to extend the radius and set a shadow of the same color as the border. How about this wave operation? The atmosphere?

Frosted glass

Look at the finished product firstLook at the source code

<div class="wrapper">
  <div class="main">Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>Frosted glass, frosted glass, frosted glass, frosted glass!<br>
  </div>
</div>

<style>
  .wrapper..main::before {
    background-image: url('./sea.jpeg');
  }
  
  .main::before {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    z-index: -1;
    filter: blur(10px);
    margin: -1em; /** to prevent white edges **/
  }
  
  .main {
    z-index: 0;
    color: #fff;
    padding: 1em;
    position: relative;
    overflow: hidden;
    background-color: hsla(0.0%.100%.5);
  }
</style>

Copy the code

The core lies in: use pseudo-class elements to put an original picture below, and then use filter and Z-index to achieve the frosted glass effect, it is recommended to manually type again, more impressive!