HTML5 and CSS3 Tutorial #4: Transparency with “rgba” and “opacity”

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following notable HTML5/CSS3 topics will be covered in this tutorial:

1. “rgba” CSS3 feature
2. “opacity” CSS3 property
3. “background-image” CSS3 property


Note: All files used to compile this tutorial were contained in the same directory

This will be a very simple tutorial on how to make a transparent background for any element/div you wish. It’s very simple to do, as you really only need to use the “rgba” or “opacity” properties in your CSS3 stylesheet (depending on what you’re looking to do).

When you want a transparent element/div, there’s one of two things you’re looking for.

1) You want ONLY the background of the element to be transparent, not the text (rgba).
2) You want EVERYTHING in the element to be transparent, INCLUDING the text (opacity).

I will now show screenshots of what these ideas look like along with the code associated for each screenshot.

1) Background of element is transparent, but not text (rgba):
transparent_background_rgba_demo

HTML5 Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylesheet.css" />
        <title>Transparent Background Demo</title>
    </head>
    <body>
        <div id="wrapper">
Here is some example text. As you can see, the background of this wrapper element is transparent
and you can still see the background image through the wrapper. 
            <br/>
            <br/>
            <br/>
            <br/>

Here is more example text just to make the wrapper look filled. 
            <br/>
            <br/>
            <br/>
            <br/>

Okay no more text now.

        </div>
    </body>
</html>

CSS3 Code:

#wrapper {
  width: 70%;
  padding: 50px;
  color: #000;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  background: rgb(255, 255, 255); 
  background: rgba(255, 255, 255, 0.5);
  height: 550px; 
  font-size:25px; 
}

body {
  background-image: url("background_image.jpg");
}

 

 


The following will be a screenshot of how the transparency works when using the “opacity” CSS3 property instead of rgba. Here, not only is the background transparent, but the text is as well. Though, it might be hard to see in this screenshot, I assure that you that it works.

2) Background and text are transparent (opacity):
Transparent Background and Text

HTML5 Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylesheet.css" />
        <title>Transparent Background Demo</title>
    </head>
    <body>
        <div id="wrapper">
Here is some example text. As you can see, the background of this wrapper element is transparent
and you can still see the background image through the wrapper. 
            <br />
            <br />
            <br />
            <br />

Here is more example text just to make the wrapper look filled. 
            <br />
            <br />
            <br />
            <br />

Okay no more text now.

        </div>
    </body>
</html>

CSS3 Code:

#wrapper {
  width: 70%;
  padding: 50px;
  color: #000;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  opacity: 0.5;
  background-color: #C8C8C8;
  height: 550px;
  font-size: 25px;
}

body {
  background-image: url("background_image.jpg");
}

Questions/feedback? Please leave a comment!

P.S:

You’re probably a motivated web developer who wants to freelance, blog, and/or be the best developer you can be. I feel many developers suffer from lack of clarity on their career/life, and poor time management and productivity practices. Without clarity and without the commitment to maximize your time, you don’t give yourself the ability to even work on your website projects and hone your coding skills with maximum efficiency.

To be the best coder, blogger, or freelancer you can be, it helps to master the non-technical aspects of entrepreneurship and personal growth. To begin building a solid foundation, I highly recommend that you consider getting my mentor’s free entrepreneurship book and training right now, where he shares his top 30+ tips that he followed in order to become a multi-million dollar entrepreneur in his 20s. I’ve read it, and as a blogger and web developer, it’s made a huge difference in my career outlook and my productivity! In addition, you may also find his productivity and time management master class useful to sign up for!

Remember that the book is free, so be sure to get it here now because I’m not sure if he’s planning to remove the book off the website! Obviously you have the choice, but I truly believe that you will learn some valuable lessons from it, like I have as a fellow blogger and developer. Please let me know if you have any questions, and I’d love to hear what you learn from the book!

teb-fb

Fanime and Computer Science

It’s probably been about three weeks or so since summer break started. I’ve had a pretty good one so far. I already accomplished a lot, I guess I could say. I’m watching more anime, I’ve been writing programs, I’m building a website, I’m blogging lol, and all at the same time I’ve been able to spend some time with friends and family.

Ash & Tifa
Me (Ash Ketchum) with a Tifa cosplayer

I’ll begin with Fanime. This year’s FanimeCon in San Jose was the first one I’ve ever been to, and I was pretty excited, and overwhelmed I suppose. I thought I was a real nerd, but seeing everyone at the convention in their awesome cosplays and such actually made me feel out of place. I hadn’t watched a whole lot of anime prior to the convention so my knowledge on everything  was pretty much non-existent compared to everyone else; there is no way I would be able to hold any kind of intelligent conversation with anyone there, but regardless I got used to the vibe after a while. I had my friends and cousin show up so we had fun walking around and seeing everything. I even had some fun watching the Stage Zero events; I kinda wish I participated in the cosplay drawing contest. By the way, I cosplayed as Ash Ketchum, and compared to all the cosplayers over at Fanime, I was pretty damn confident that my cosplay looked just as legit as everyone else’s!

Along with my going to Fanime and watching my friends graduate, I’ve written some programs already. Two of them were written in Java and they’re desktop apps that rename your directories/files in bunches for you (so you don’t have to do it manually for each directory/file), and one counts how many files of a certain format you have on your desktop. Now, especially for the first program, you might be wondering how useful that might be. Well, for those of you that watch anime, you have a lot of unnecessary junk written in the beginning and/or end of each file/direcotry name, right? That program is EXACTLY what it’s for. The only thing is, I have to modify my programs and turn them into interfaces rather than have them execute fully through text. After that’s accomplished, I hope I can publish them as apps that people can use so I can say that I’ve made some apps at some point in my life.

My Website
Current color scheme of our website

And together with those programs, I’ve been working on a website project for the past two weeks or so. This is the current look of the homepage, and as you can see there’s still a lot of work to be done. But it’s making progress! If any of you viewers would like to give any feedback on the color scheme and such, then feel free to comment (or those of you who link to here through my Facebook or Twitter, just message me :P). I would greatly appreciate a lot of feedback because in order for this website to be successful, it has to attract viewers (much like any other website). Also, ignore the black text please. That’s just there for testing purposes.

Having said that, it’s pretty much a website dedicated to video game reviews and guides written by me and a friend of mine, but there’s no content published as of right now. The website will even allow for gamers to interact with each other through forums and chat rooms, and watch video streams conducted by the administrators. At the moment we’re collaborating with each other to decide what designs, color schemes, features, etc etc would look good on our finished product. For individual projects, I’m developing the website (the design, and the client/server-side related stuff), and he is writing the content. Whenever this website is officially done, I’ll be sure to have a link to it on here. In the future, we may even allow for a section dedicated to anime discussion and reviews as well.

As far as updates go on the blog, be on the lookout for another anime review soon. I already made one for Angel Beats! as you probably saw, the next one will be a review on Boku wa Tomodachi ga Sukunai!