HTML・CSS Writing 2022

[CSS3] opacity --Set opacity --Introduction to CSS [CSS3 compatible]

To set the opacity of an element, set opacity in the style sheet (CSS). The maximum opacity is 1 and the minimum opacity is 0. In other words, the closer it gets to 0, the more transparent it becomes.

/ * Opacity 1-Same as default * /
opacity: 1;

/ * Opacity 0.8-Slightly more transparent and shiny * /
opacity: 0.8;

/ * Opacity 0.4-Increases transparency * /
opacity: 0.4;

/ * Opacity 0.1-fading * /
opacity: 0.1;

/ * Opacity 0-Completely transparent * /
opacity: 0;

Let's actually set the opacity. Those with 0 opacity disappear completely and are invisible.

<div style = "opacity: 1;"> Opacity 1-Same as default </div>

<div style = "opacity: 0.8;"> Opacity 0.8 --Slightly more transparent and shiny </div>

<div style = "opacity: 0.4;"> Opacity 0.4-Increased transparency </div>

<div style = "opacity: 0.1;"> Opacity 0.1-fading </div>

<div style = "opacity: 0;"> Opacity 0-Completely transparent </div>

Transparency applies to the entire element

Transparency applies to the entire element. That is, transparency is applied, including everything, including backgrounds and borders.

Make the button glow when hovering

Let's make the button glow when hovering with the opacity setting. This is an easy way to let the user know that you are doing the action of hovering.

<style>
  .button_hover {
    width: calc (100%-30px);
    max-width: 600px;
    margin: 0 auto;
  }
  .button_hover a {
    display: block;
    width: 100%;
    background: # 15e650;
    color: white;
    text-align: center;
    padding: 20px 50px;
    font-size: 20px;
  }
  .button_hover a: hover {
    opacity: 0.8;
  }
</style>

<div class = "button_hover">
  <a href="/"> To the top</a>
</div>