Hello world!

I’ll continue to update and contribute more to my blog by writing more tutorials and other goodies in the next few weeks, stay tuned!

Also. I want and need a job. I’m thinking about becoming a free lance web designer on the side, but that won’t be consistent money. I’ll also definitely need a full time job after graduating from USF in May. Any suggestions on small start-ups/companies that I can contact? Any of them looking for web developers or programmers? I’d love to get in touch with them!

Video Game Guides, Reviews, and Forums – Hyakki’s Corner

Everyone please check out this new gaming website I’ve been working on: www.hyakkiscorner.com! If you can take a moment and bookmark the site and register on it, I would be eternally grateful for your support. We focus on writing video game reviews and guides, and provide user interactivity through forums and article discussions. So please check it out!

 

www.hyakkiscorner.com

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