This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How make a div tag transparent using HTML & CSS in VS Code

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_25

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi everybody, we're going to look at making things see-through. Normally referred to encode as alpha transparency, opaqueness. You get what I mean, we're going to go from this to this, where it's a little bit see-through or a lot see-through. I'm going to show you now how to do it in CSS. 

All right, to do the transparency we're going to do it to this Nav. Currently it is red, let's first change it to a color, we'll change it to black. So let's go to VS code. Let's find our Nav, there he is there, color, we're going to type in black. We didn't really need to do that first but make sure you save it all. Preview it, there it is, it's black. 

Now we want to make it a little bit transparent. I kind of mentioned this earlier on but if you highlight the word Black, or just click in here, it's a little bit hard to get this thing activated, I find. Man, here we go. Eventually you can get this thing going. Now it doesn't really matter, you can make a black in here, on the fly. What ends up happening is, if you pick a solid color you get three options. Red, green, and blue. 

At the moment, if they're all set to zero, that means you get black. You set them all to 255, you get them all, it creates a white color. There's nothing that I'm going to say, except that you can add a fourth dimension.

So over here if I drag the slider down to say-- I'm kind of looking up here. That one there, see, 000, and there's this new extra edit option. Think of them as percentages. If I go higher, like, whenever I select 1, it disappears, but if I come down, 0.975, is like 97%. That's 50% see-through. And getting right down here, it's like 10% opaque. 10% opaque's a better explanation, so 10% color in it, 50% of color, 90% means it's almost completely black again. Did I explain that okay? Drag it up, in time you'll work it out. 

All right. so I'm going to have mine about 30%-ish. You'll see, there it is there, so 0.3 means it is 33% black. They're not very, let's save it, let's test it. So look, there you go. Now if you're old-school Web Design, and you're using those Hexadecimal numbers, remember the hash, we did them earlier on, hash, hash, come on, Dan, hash, and I pick some random colors. You can't do alpha transparency with that, you have to use this thing called RGB-A, which is red, green, blue, and alpha, which is the see-through bit. 

All right, that is how to make something see-through. Now we've done it for the background color here in our Nav, but you could do it with Type. You can make any color that you've applied to things slightly opaque, or lots opaque. All right, that is it. I'll see you in the next video.