Exercise 6- Div Background Colors

 

<p>&nbsp;</p>

<p>Excercise</p>

<div class="canvas">

<h1>WITH OPACITY</h1>

<div class="First">

<h2>20% OPACITY</h2>

</div>

<div class="Second">

<h2>40% OPACITY</h2>

</div>

<div class="Third">

<h2>60% OPACITY</h2>

</div>

<div class="Fourth">

<h2>80% OPACITY</h2>

</div>

<div class="Fifth">

<h2>100% OPACITY</h2>

</div>

<h1>WITH RGBA COLOR VALUES</h1>

<div class="first">

<h2>rgba(0, 123, 255, 0.2)</h2>

</div>

<div class="second">

<h2>rgba(0, 123, 255, 0.4)</h2>

</div>

<div class="third">

<h2>rgba(0, 123, 255, 0.6)</h2>

</div>

<div class="fourth">

<h2>rgba(0, 123, 255, 0.8)</h2>

</div>

<div class="fifth">

<h2>rgba(0, 123, 255, 1)</h2>

</div>

</div>

----------------------------------------------

body {

margin: auto;

background-color: silver;

}

div {

margin:50px;

padding: 50px;

}

div.First {

background-color: blue;

margin: 20px;

padding: auto;

height: 10px;

Opacity: 20%;

border-radius: 20px;

}

div.Second{

background-color: blue;

margin: 20px;

padding: auto;

height: 10px;

Opacity: 40%;

border-radius: 20px;

}

div.Third {

background-color: blue;

margin: 20px;

padding: auto;

height: 10px;

Opacity: 60%;

border-radius: 20%;

}

div.Fourth {

background-color: blue;

margin: 20px;

padding: auto;

height: 10px;

Opacity: 80%;

border-radius: 20px;

}

div.Fifth {

background-color: blue;

margin: 20px;

padding: auto;

height: 10px;

Opacity: 100%;

border-radius: 20px;

}

h1 {

font-family: Verdana;

font-size: 30px;

color: black;

text-align: center;

}

div.first{

background: rgba(0, 123, 255, 0.2);

border-radius: 20px;

margin: 20px;

}

div.second {

background: rgba(0, 123, 255, 0.4);

border-radius: 20px;

margin: 20px;

}

div.third {

background: rgba(0, 123, 255, 0.6);

border-radius: 20px;

margin: 20px;

}

div.fourth {

background: rgba(0, 123, 255, 0.8);

border-radius: 20px;

margin: 20px;

}

div.fifth {

background: rgba(0, 123, 255, 1);

border-radius: 20px;

margin: 20px;

}

</style>