Viewing Thread:
"CSS Opacity & Transparency - another feature you may not be familiar with!!!"

[B][U]CSS Opacity & Transparency - another feature you may not be familiar with!!![/U][/B]

In the previous article, CSS Rounded Corners - a feature you may not be familiar with!, I introduced the ability of making the straight edges of a box a little curvy. This was achieved using a CSS 3 feature, which has been implemented in many a web browser, in one form or another, with one exception of course!

In this second article, a somewhat mini article (compared to some of my other novels), I want to introduce to you the use of opacity, which is like transparency (making items on your page clear right through so you can see what’s underneath it), but with the added ability to set the level of transparency, so that an object is only partly see-through. This can make for compelling web site designs, and as they are achieved through CSS, are simple to implement and take advantage of on any web page.

As with the previous article, this is aimed at people who know about CSS, so I’ll not be expanding too much on any given property, though do feel free to ask if you’re not sure about something.

You should also note that CSS 3 is still "under construction", and so if used, will not pass W3C validation.

Internet Explorer!

I was hoping to have some good news for Hmmm…, by including examples of opacity that work in Internet Explorer, using the IE filter CSS property – but for some reason, they are not working as I’d expected on my local machine. I’m sure that they should work, and that there is something wrong with my copy of IE 8, but didn’t want to post examples that may no longer work – dam Microsoft, or dam me, one of the two!

So, Opacity, What Is It All About?

The term opacity (or opaque) refers to the level of transparency (see-through-ness) of an object on a web page. Web page developers will most likely know that you can make a background colour 100% see-through by using the CSS code background-color: transparent; - or by given it a full colour name, such as red, using the code background-color: pink; - ops, I mean background-color: red;.

The levels of transparency for the two above examples are either side of the scale, fully transparent, or not transparent at all. Both perfectly acceptable uses of colour of course, but for a long time, web site designers have wanted the ability to set the level of transparency on elements, enabling them to create some truly stunning designs.

This type of functionality has been proposed in the colour module of CSS 3, which is currently under review / development, and being in such demand is already available in Firefox, Opera, and Chrome. It might be available in Internet Explorer 9, which might make an appearance in 2011. But being such a cool feature with such great design potential, are you really going to let Microsoft hold you down?

I swear it’ll work in IE today!

Setting An Opacity / Transparency Level!

The opacity scale is set from 0 to 1, with 0 being completely transparent (see-through) and 1 being completely solid with colour. Settings in between are set as 0.1, 0.2, 0.3 … 0.7, 0.8, 0.9, depending on how transparent you want an element to be.

If you wanted an element to be a little bit see-through, you could choose to use an opacity of 0.8, while if you wanted an element to be very see-through, but not completely, you might choose an opacity of 0.2

There are two CSS properties that can be used to set the level of transparency. The first being [B]opacity[/B], and the second being [B]rgba[/B].

Opacity vs. rgba – What’s The Difference?

The two CSS properties perform a similar task, but do so in different ways. The [B]opacity[/B] property will make everything it is assigned to transparent. It is basically a block setting, applying the level of transparency to text and images. It will also be applied to elements that are within the current block. If, for example, this CSS property were used on the body element, it would make the entire web page partly transparent. You may have seen this effect on pages that show larger versions of images in the centre of the screen, where the page appears to "fade" while the large picture is shown.

The property [B]rgba[/B] is used in a similar way as the property [B]rgb[/B] (note the missing [B]a[/B] this time). It can be used to set the colour of a single element, such as the text colour alone, or just the background colour (like [B]rgb[/B]), but also includes the ability to set the level of transparency desired. The setting only applies to a single element, and is not inherited by another other element.

CSS Property: opacity!

If we started with the HTML code:

<div>
<h1>Page Heading</h1>
<p>A paragraph of text.</p>
<p>Another paragraph of text.</p>
</div>

… we might use a little CSS to style it, such as:

div {
background: red;
color: white;
}

This would make all the text white, and the background of the <div> element red. Perhaps not the best choice of background colour, but never mind. The above is a pretty standard HTML / CSS combination.

If we wanted to make this whole block of HTML partly transparent (see-through) we can use the [B]opacity[/B] CSS property to do this. For example, lets say we want to make it halfway between fully transparent and not transparent at all, we’d need the property value of 0.5, and would add it to the existing CSS declaration:

div {
background: red;
color: white;
[B]opacity: [U]0.5[/U];[/B]
}

And that would be all that it takes to make the whole HTML block partly see-through - a single CSS declaration. If we wanted the HTML block to be very transparent, to the point where it is almost invisible, we could have used the value 0.2 or even 0.1, such as:

div {
background: red;
color: white;
[B]opacity: [U]0.1[/U];[/B]
}

If however, we only wanted it to be a little transparent, we would use a higher value, such as 0.8 or 0.9, like so:

div {
background: red;
color: white;
[B]opacity: [U]0.9[/U];[/B]
}

CSS Property: rgba!

The [B]rgba[/B] property sets colour in the same way as the [B]rgb[/B] property, with the level of red, green and blue you want to use, such as [B]rgb(255,0,0)[/B] for only red, [B]rgb(0,255,0)[/B] for only green, or [B]rgb(0,0,255)[/B] for only blue.

There is a fourth parameter for the [B]rgba[/B] property, and this is the same value as would be used with the [B]opacity[/B] property, the level of transparency you want the colour to be.

This is handy for making a single background colour or text colour to be partly transparent.

We might start again with the HTML:

<div>
<h1>Page Heading</h1>
<p>A paragraph of text.</p>
<p>Another paragraph of text.</p>
</div>

Firstly, we may want to add a background image to our <div>, and could do so via:

div {
[B]background: url("/img/butterfly.jpg") white top left repeat;[/B]
}

We might also want to give the heading a background colour of red:

div {
background: url("/img/butterfly.jpg") white top left repeat;
}
[B]div h1 {
background-color: red;
}[/B]

But then we see the red is covering the background image, and doesn’t look that good. We’d rather the image was seem through the read, which is where the [B]rgba[/B] CSS property comes in to play. If we replace the word "red" with the [B]rgba[/B] property, we can assign the background colour as red, but then also give it an opacity / transparency level of 0.4 in the fourth parameter:

div {
background: url("/img/butterfly.jpg") white top left repeat;
}
div h1 {
background-color: [B]rgba(0,0,255,[U]0.4[/U])[/B];
}

And with that one simple CSS property, we’ve enabled the butterfly to push its way through the field of view to the user.

Give It A Go!

While this article didn’t go in to too much detail, those of you who are familiar with CSS should understand how setting a level of transparency on an element can now be done in some of the more advanced web browsers.

I’ve thrown together a couple of examples of using CSS 3 opacity & transparency, which should hopefully show you some of the see-through-ness of certain elements.

It can be used to create some really nice designs and visual effects, with minimal code, and stunning outcomes … well, potentially stunning, depending on your design ability, which mine leave a lot to be desired!

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

[B][U]CSS Opacity & Transparency - another feature you may not be familiar with!!![/U][/B]

In the previous article, CSS Rounded Corners - a feature you may not be familiar with!, I introduced the ability of making the straight edges of a box a little curvy. This was achieved using a CSS 3 feature, which has been implemented in many a web browser, in one form or another, with one exception of course!

In this second article, a somewhat mini article (compared to some of my other novels), I want to introduce to you the use of opacity, which is like transparency (making items on your page clear right through so you can see what’s underneath it), but with the added ability to set the level of transparency, so that an object is only partly see-through. This can make for compelling web site designs, and as they are achieved through CSS, are simple to implement and take advantage of on any web page.

As with the previous article, this is aimed at people who know about CSS, so I’ll not be expanding too much on any given property, though do feel free to ask if you’re not sure about something.

You should also note that CSS 3 is still "under construction", and so if used, will not pass W3C validation.

Internet Explorer!

I was hoping to have some good news for Hmmm…, by including examples of opacity that work in Internet Explorer, using the IE filter CSS property – but for some reason, they are not working as I’d expected on my local machine. I’m sure that they should work, and that there is something wrong with my copy of IE 8, but didn’t want to post examples that may no longer work – dam Microsoft, or dam me, one of the two!

So, Opacity, What Is It All About?

The term opacity (or opaque) refers to the level of transparency (see-through-ness) of an object on a web page. Web page developers will most likely know that you can make a background colour 100% see-through by using the CSS code background-color: transparent; - or by given it a full colour name, such as red, using the code background-color: pink; - ops, I mean background-color: red;.

The levels of transparency for the two above examples are either side of the scale, fully transparent, or not transparent at all. Both perfectly acceptable uses of colour of course, but for a long time, web site designers have wanted the ability to set the level of transparency on elements, enabling them to create some truly stunning designs.

This type of functionality has been proposed in the colour module of CSS 3, which is currently under review / development, and being in such demand is already available in Firefox, Opera, and Chrome. It might be available in Internet Explorer 9, which might make an appearance in 2011. But being such a cool feature with such great design potential, are you really going to let Microsoft hold you down?

I swear it’ll work in IE today!

Setting An Opacity / Transparency Level!

The opacity scale is set from 0 to 1, with 0 being completely transparent (see-through) and 1 being completely solid with colour. Settings in between are set as 0.1, 0.2, 0.3 … 0.7, 0.8, 0.9, depending on how transparent you want an element to be.

If you wanted an element to be a little bit see-through, you could choose to use an opacity of 0.8, while if you wanted an element to be very see-through, but not completely, you might choose an opacity of 0.2

There are two CSS properties that can be used to set the level of transparency. The first being [B]opacity[/B], and the second being [B]rgba[/B].

Opacity vs. rgba – What’s The Difference?

The two CSS properties perform a similar task, but do so in different ways. The [B]opacity[/B] property will make everything it is assigned to transparent. It is basically a block setting, applying the level of transparency to text and images. It will also be applied to elements that are within the current block. If, for example, this CSS property were used on the body element, it would make the entire web page partly transparent. You may have seen this effect on pages that show larger versions of images in the centre of the screen, where the page appears to "fade" while the large picture is shown.

The property [B]rgba[/B] is used in a similar way as the property [B]rgb[/B] (note the missing [B]a[/B] this time). It can be used to set the colour of a single element, such as the text colour alone, or just the background colour (like [B]rgb[/B]), but also includes the ability to set the level of transparency desired. The setting only applies to a single element, and is not inherited by another other element.

CSS Property: opacity!

If we started with the HTML code:

<div>
<h1>Page Heading</h1>
<p>A paragraph of text.</p>
<p>Another paragraph of text.</p>
</div>

… we might use a little CSS to style it, such as:

div {
background: red;
color: white;
}

This would make all the text white, and the background of the <div> element red. Perhaps not the best choice of background colour, but never mind. The above is a pretty standard HTML / CSS combination.

If we wanted to make this whole block of HTML partly transparent (see-through) we can use the [B]opacity[/B] CSS property to do this. For example, lets say we want to make it halfway between fully transparent and not transparent at all, we’d need the property value of 0.5, and would add it to the existing CSS declaration:

div {
background: red;
color: white;
[B]opacity: [U]0.5[/U];[/B]
}

And that would be all that it takes to make the whole HTML block partly see-through - a single CSS declaration. If we wanted the HTML block to be very transparent, to the point where it is almost invisible, we could have used the value 0.2 or even 0.1, such as:

div {
background: red;
color: white;
[B]opacity: [U]0.1[/U];[/B]
}

If however, we only wanted it to be a little transparent, we would use a higher value, such as 0.8 or 0.9, like so:

div {
background: red;
color: white;
[B]opacity: [U]0.9[/U];[/B]
}

CSS Property: rgba!

The [B]rgba[/B] property sets colour in the same way as the [B]rgb[/B] property, with the level of red, green and blue you want to use, such as [B]rgb(255,0,0)[/B] for only red, [B]rgb(0,255,0)[/B] for only green, or [B]rgb(0,0,255)[/B] for only blue.

There is a fourth parameter for the [B]rgba[/B] property, and this is the same value as would be used with the [B]opacity[/B] property, the level of transparency you want the colour to be.

This is handy for making a single background colour or text colour to be partly transparent.

We might start again with the HTML:

<div>
<h1>Page Heading</h1>
<p>A paragraph of text.</p>
<p>Another paragraph of text.</p>
</div>

Firstly, we may want to add a background image to our <div>, and could do so via:

div {
[B]background: url("/img/butterfly.jpg") white top left repeat;[/B]
}

We might also want to give the heading a background colour of red:

div {
background: url("/img/butterfly.jpg") white top left repeat;
}
[B]div h1 {
background-color: red;
}[/B]

But then we see the red is covering the background image, and doesn’t look that good. We’d rather the image was seem through the read, which is where the [B]rgba[/B] CSS property comes in to play. If we replace the word "red" with the [B]rgba[/B] property, we can assign the background colour as red, but then also give it an opacity / transparency level of 0.4 in the fourth parameter:

div {
background: url("/img/butterfly.jpg") white top left repeat;
}
div h1 {
background-color: [B]rgba(0,0,255,[U]0.4[/U])[/B];
}

And with that one simple CSS property, we’ve enabled the butterfly to push its way through the field of view to the user.

Give It A Go!

While this article didn’t go in to too much detail, those of you who are familiar with CSS should understand how setting a level of transparency on an element can now be done in some of the more advanced web browsers.

I’ve thrown together a couple of examples of using CSS 3 opacity & transparency, which should hopefully show you some of the see-through-ness of certain elements.

It can be used to create some really nice designs and visual effects, with minimal code, and stunning outcomes … well, potentially stunning, depending on your design ability, which mine leave a lot to be desired!

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.