CSS In-Depth, v2 CSS In-Depth, v2

Opacity vs. Alpha Transparency

Check out a free preview of the full CSS In-Depth, v2 course:
The "Opacity vs. Alpha Transparency" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle differentiates between opacity and alpha transparency, why it matters, and provides tips to make the right choice.

Get Unlimited Access Now

Transcript from the "Opacity vs. Alpha Transparency" Lesson

[00:00:02]
>> Estelle Weyl: AlphaTransparency is what we've been talking about so far, which is changing the color, right? Your color is not fully opaque. And that is the color of some foreground element. So here we have, the color is black. And then the background color is some form of orange? No, some form of blue.

[00:00:28] I have no clue, cuz background-color all looks white to me and so I think I should have read border color. And so I basically get more and more transparent as I go by, but it's actually the color that's getting transparent. The thing itself is still white, right? Because if it wasn't white, if the background color wasn't white, fully opaque, you'd see what was behind it.

[00:00:52] When you have opacity, it's actually the whole element that is becoming transparent. So here, the top one is opacity 1. The second one is opacity 75%, opacity 50%, opacity 25% and the one that has opacity 0, you can't see that there was a div there, at all. Because the whole thing became fully the opposite of opaque, which is transparent.

[00:01:18] Here you still have the white, because only the color of the shadow, it should be shadow color. And the color of the text became transparent. But you still have the shadow on that text and you still have the background that is fully opaque. Here the text, the shadow, the background, all of it became transparent, because the opacity was set on the element.

[00:01:45] And everything went to transparent. So that's the difference between AlphaTransparency and opacity. Which really doesn't make it that much of a difference in your life, until you get stuck on explaining to someone, basically. So AlphaTransparency tips, transparent shadows are awesome. Instead of using a value like CCC for a gray shadow, or 999 which is the one on the bottom, use something like transparent RGBA with 0.3 or 0.2, because then you can see stuff in the background.

[00:02:22] Especially if it's over and image or something with changing colors. This looks completely artificial and this looks very natural on top of stuff.