Before CSS3, transparent backgrounds 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 RBG colors. In addition, CSS3 introduces the following:
RGBA color values are an extension of RGB color values with an alpha channel, which specifies the opacity of a color. An RGBA color values is specified with: rgba(red, green,blue,alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
An HSL color value is specified with: hsl(hue,saturation,lightness). Hue is a degreen 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 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 {
border-style: solid;
border-color: black;
background-image:url("bh.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.2) 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;
}