0:08
You're watching CSS for beginners lesson 48 and in this video we're going to talk about opacity
0:14
Alright then so here I am back in the code and as you can see I've changed it once again
0:19
I like doing that I've given it three divs here each with an idea of circle, circle
0:24
two and circle three then I've styled those bad boys right up here
0:29
They've all got a width and height of 400 pixels. I've positioned them all absolute
0:34
You don't need to worry about what that means yet. I've not covered it. We'll do that at a later date
0:38
I've given them all a unique background color, a border radius of 200 pixels, making them
0:43
into that circle shape, and I've positioned them from the top and left by varying amounts
0:48
Now don't worry about those as well. I'll cover those along with the position absolute property
0:54
So the first one has a colour of yellow. Second one, pink, third one, blue
1:00
And I'm just going to show you what this looks like in a browser. And it looks something like that
1:07
So it's like one of those charts you see where things mingle and you've got percentages all over the place
1:11
So I've just made this diagram to show you how opacity works
1:15
And we're going to change the opacity of each of these different circles in the code
1:19
So we'll jump back over. And the way this works is by simply passing the property name
1:28
opacity and they run right the way from zero you can give that if you want
1:34
something to be completely transparent or one and that will be completely
1:39
opaque so it be solid so if we pass this a value of zero remember this was the yellow one then that should be completely transparent so let view this in a browser refresh there and there we go completely goes away it white underneath
1:55
so showing the white through the circle it's completely transparent okay now if we change this back to one
2:03
that's completely solid and save this then it should there we go come back and that's because it's completely opaque
2:12
completely solid. So what if we want something in between? We don't want something to be completely transparent
2:19
but then again, we don't want it to be fully solid either. Well, we can do that
2:24
Let's go back and have a look. We can say we want an opacity
2:28
We'll come down here to the blue circle, and we'll say opacity 0.7
2:34
So that's not quite solid, but it's not going to be very see-through
2:40
You're going to be able to see-through a little bit, but not much. So let's save that and view it in a browser
2:45
And now we can see the blue is faded a little bit and you can start to see the yellow underneath and the pink underneath
2:52
Okay? So that's pretty cool. And we can do the same with the pink element
2:57
Let's have a look at that. We'll come up here and say opacity 0.3
3:02
And then we're saying we want that to be more transparent. Not fully transparent, but more transparent than this blue one, which is 0.7
3:10
So let's again save that and view this in a browser. And cool
3:16
Now you can see this is really faint. You can only just see this through the blue
3:21
And you can even see two layers deep, this yellow bit right underneath at the bottom
3:25
because you're seen through two layers. Okay so that the opacity property in a nutshell However there are some kind of hitches to using this And I show you what I mean If I go back to this code here and I put some text in here let call this hello and we
3:43
do it in circle 2 as well, hello and circle 3, hello
3:51
And they're all going to be black by default. Okay, and we'll save this, oops, save it and then view in a browser
3:59
Now we can see here, okay, they're not positioned correctly within those circles, but
4:08
trying to, in fact, I'll tell you what I'll do, I'll go back here and I'll say
4:12
text align center, and then we'll copy that for each one, and then view this again
4:29
Now the hellos are positioned within each element. And you can see this one here is perfectly fine
4:36
It's got that value of one, the circle for the opacity. So this here is not faded at all
4:42
Now, this one here, this blue one, has got an opacity of 0.7. And not only does it affect the background colour, it also affects the text itself
4:52
So if you wanted to control just the background opacity, then that's a different property
4:59
entirely I mean if you look at this pink one you can barely see the hello at all it's right under there at the bottom okay and this kind of makes itself
5:07
evident if I go to opacity um one in fact not point one for this blue one here
5:15
and then save that and view it again now you can see this hello is barely visible at all okay so how do we combat this well there is a way and that by using the RGB color format with an additional alpha channel
5:30
And we can do that by coming to our background property here, RGB, and then adding an A onto
5:36
the end of it, that stands for alpha, and remember alpha channels control the opacity of an
5:41
element, and then we just add a third comma here and a fourth value for the alpha channel, and
5:47
we can do exactly the same. It runs from 0 to 1 and we'll say 0.5 or even 0.1
5:53
Let's get rid of this opacity because we don't need this anymore. We're controlling it here. So we'll save that
5:58
and view this in a browser. Refresh. And now the background blue
6:05
is 0.1 in opacity but this here, this text, still remains very solid
6:11
and very viewable. Okay? So that's how we control the background color
6:16
Now, before we kind of say, yeah, use this all the time, you do need to be aware that prior to Internet Explorer 9, so IE8 and less, this isn't fully supported
6:28
So you do need to kind of offer some kind of backup options, all right
6:32
I'm not going to go into that now because that's beyond the scope of this video. But maybe in future videos I'll talk about that
6:39
So that is the opacity and background opacity, the RGBA, in a nutshell
6:44
If you have any questions about this, feel free to comment down below and I'll answer all of those
6:49
Otherwise, if you enjoy these videos, please like, subscribe or share, and I'll see you guys in the next one
