CSS3 Transparency

Mastering CSS3 - Part 9

Forward: Hey, with CSS3, you can have color that is semi-transparent. That is what we look at in this tutorial.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 9 of my series, Mastering CSS3. Hey, with CSS3, you can have color that is semi-transparent. That is what we look at in this tutorial. I assume you have read the previous parts of the series before reaching here; this is a continuation. For you to notice the semi-transparent nature of any color, that color must be in front (one layer) of an element. Transparency and opacity are the same thing seen at opposite ends. When something, is fully transparent, you see through it completely. The something is fully opaque you do not see through it at all. In CSS3, transparency is called opacity and interpreted from the dark end.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

RGBA Color Coding
In the series, “CSS3 Basics” we saw the decimal rgb color coding. We saw for example, that instead of typing the yellow color as “yellow”, you could type rgb(255,255,0). RGBA color coding is the same as RGB color coding, but it has a fourth value. The fourth value is for opacity (transparency) of the color. It can be anything between 0 and 1 (inclusive). The value of 0 means full transparency (no opacity). The value of 1 means full opacity (no transparency). This opacity value is also called the alphavalue. The A in RGBA, means alpha; do not worry too much about that, for now.

Example 1
In the following code, which you should try, the background color of the body element is black and the color of the h1 element is red but has an opacity of 0.5

<!DOCTYPE HTML>
<html>
<head>
<title>RGBA</title>
</head>
<body style= "background-color:black">
<h1 style= " color:rgba(255,0,0,0.5)">The main Heading</h1>
</body>
<html>

Note that the fourth value in the RGBA code is separated from the third value by a comma; in fact commas are used to separate all the values in the RGBA code and also in the RGB code.

Example 2
In the following example, which you should read and try, the background color of the body element is bisque. The color of the paragraph element is red with opacity of .3 . The color of the text in the paragraph is blue.

<!DOCTYPE HTML>
<html>
<head>
<title>RGBA</title>
</head>
<body style= "background-color:bisque">
<p style= "background-color:rgba(255,0,0,0.3);color:blue">text text text text</p>
</body>
<html>

Application of Opacity
If you want to cover all the web page or a large part of it, so that the user cannot activate the elements behind the cover and cannot select text behind the cover, but can see through the cover, what you have to do is to make the cover an element of a high z-index number with a background color that is semi-transparent. The lower the opacity of the cover, the better the transparency; the higher the opacity the lower the transparent.

Well, let us stop here. We continue in the next part of the series.

Chrys

Broad Network

CSS3 Transparency

Mastering CSS3 - Part 9

Introduction

Related Links

Comments