create css border opacity

Posted under CSS3 Course On By mohammed.mutawe

css border opacity

This is a property of graphics and it indicates giving a value in a function to do a simple arithmetic equation to get the result of the appearance parameter or opacity and the beautiful thing is that the CSS language contains this property to be used in our pages.

 

Definition

Opacity has many uses, as we said, but calling it in CSS is very simple:

Opacity:value;

They are called in a value from 0 decimal to 1 integer, and the closer a value to 1 is the closer to clarity.

 

Benefits

The use of opacity has many benefits, including:

  • They are used in side components on the page and do not have much use.
  • It is widely used in thumbnails.
  • Active and not active Html tags like menus or sections.

 

Example

Please, to understand CSS opacity well, copy the following codes and run it in your browser.

CSS

div{
    width:500px;
    height:100px;
    padding:10px;
    background-color:#D9D9D9;
    Opacity:0.4;

}

div:hover{
    width:500px;
    height:100px;
    padding:10px;
    background-color:#D9D9D9;
    Opacity:1;

}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Opacity</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            This is our opacity div
        </div>
    </body>

</html>