HOLLA TECH - LEARN

Transparency Effect
 

Before CSS3, transparent background images were used to create transparency effects. The new features of CSS3 now make it easier to create transparency effects.

CSS supports color names, hexadecimal, and RGB colors.
In addition, CSS3 introduces the following:

RGBA Colors
RGBA color values are an extension of RGB color values with an alpha channel, which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

HSL (Hue, Saturation, Lightness) Colors
An HSL color value is specified with: hsl(hue, saturation, lightness).
Hue is a degree on the color wheel ranging from 0 to 360
0 (or 360) is red, 120 is green, 240 is blue.
Saturation is a percentage value: 100% is the full color.
Lightness is also a percentage; 0% is dark (black) and 100% is white. HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color (just like RGBA).

In the example below, a transparent glass menu bar is created with CSS3.

In the HTML file, a <nav> tag containing an <ul> list with links has been added: 

<nav>
   <ul>
       <li><a href=“#”>COURSES</a></li>
       <li><a href=“#”>DISCUSS</a></li>
       <li><a href=“#”>TOP LEARNERS</a></li>
       <li><a href=“#”>BLOG</a></li>
   </ul>
</nav> 

 

A number of CSS3 features are used to create the effects:

body {
   background:url(“bg.jpg”);
}
nav {
   padding: 50px 0;
   min-width: 500px;
}
nav ul {
   background: linear-gradient(90deg,
     rgba(255, 255, 255, 0) 0%,
     rgba(255, 255, 255, 0.2) 25%,
     rgba(255, 255, 255, 0.2) 75%,
     rgba(255, 255, 255, 0) 100%);
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.1),
     inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
   display: inline-block;
}
nav ul li a {
   padding: 10px;
   color: #FFFFFF;
   font-size: 18px;
   font-family: Arial;
   text-decoration: none;
   display: block;
}

 

Result: 

Holla Tech - Learn CSS3

The <ul> tag has been styled with a background gradient that is white and transparent.
Two box-shadow values have been added, one for an outer, dark shadow; and one for an inner, light edge.

NOTE!
As expected, the blue shadow (#B0E0E6) comes last.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT