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

HTML5 and CSS3 Tutorial #3: Drop-Down Navigation Bar with “:hover” Pseudo Class, and Unordered Lists

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. “:hover” pseudo-class
2. “white-space” CSS3 property
3. “position: absolute” CSS3 property
4. “display” CSS3 property


This is probably one of the more frustrating features to code for your own site when you’re a beginner. A drop down navigation bar could be one of the most essential features on your website believe it or not. If you have a lot of content and links, and need help on coding a navigation bar that handles drop-down menus, then this solution is for you. There could be better solutions out there, using different HTML elements, but this is the solution that I was able to come up with.

I’ll post the screenshots of the original navigation bar, and the navigation bar after it was hovered over, to show that the dropdown menu actually works. I know there’s a better way to do this, such as having you test the navigation bar yourself on my blog, but unfortunately I can’t handle that feature. Sorry for any inconveniences, but the code does work!

Original Navigation Bar:
initial_navigation_bar

Navigation Bar Displaying Drop Down Menu, After Hovering Over “Profile” Tab:
dropdown_menu

Questions? Feedback? Please leave a comment!

HTML Code:

[sourcecode language=”html” collapse=”false” wraplines=”false”]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dropdown Menu Demo</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div id="navigation"> <!– Navigation id not used as selector in CSS file. –>
<ul>
<li><a href="#">Home</a>
<ul class="dropdown">
<li><a href="#">Games</a></li>
<li><a href="#">Anime</a></li>
</ul>
</li> <!– END: Home –>

<li><a href="#">Profile</a>
<ul class="dropdown">
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li> <!– END: Profile –>

<li><a href="#">About</a>
<ul class="dropdown">
<li><a href="#">About Us</a></li>
<li><a href="#">Executive Team</a></li>
</ul>
</li> <!– END: About –>

<li><a href="#">Support</a>
<ul class="dropdown">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</li> <!– END: Support –>

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

[/sourcecode]

CSS Code:

[sourcecode language=”css” collapse=”false” wraplines=”false”]
ul {
list-style:none;
margin:0; /* Demonstration purposes to keep navigation menu in top left corner. */
padding:0;
}

ul li {
float:left; /* Puts tabs on same line */
}

ul li a {
display:block; /* Displays links on separate lines. */
color:#000000;
padding:5px 15px 5px 15px; /* 5px top, 15px right, 5px bottom, 15px left */
margin-top:1px; /* Separates dropdown links by whitespace */
margin-left:1px; /* Separates tabs by whitespace */
background-color:#CCCCCC;
white-space:nowrap; /* Doesn’t wrap words across separate lines if line is too long for parent’s li width. This is for the dropdown menu. */
}

li:hover ul { /* Displays dropdown menu for specific li element, once mouse hovers over li element */
position:absolute; /* Positions directly under the correct tab */
display:block;
}

li:hover li { /* Keeps li elements same width in dropdown menu, since it’s originally floating left, as specified in "ul li" selector */
float:none;
}

li:hover a {
background-color:#252525; /* Changes background color of tab and dropdown links to shade of black when tab is hovered over */
color:#FFFFFF; /* Changes text color of tab and dropdown links to white when tab is hovered over. */
}

a {
text-decoration:none; /* So that links aren’t underlined */
}

.dropdown {
display:none; /* Anything in dropdown class doesn’t appear initially when page loads */
}

.dropdown li:hover a {
text-decoration:underline; /* Underlines link if li element in dropdown menu is hovered over */
}

.dropdown li a:hover {
background-color:#CCCCCC; /* Changes background color of link in dropdown menu to grey when we hover over link */
color:#000000; /* Changes text color of link in dropdown menu to black when we hover over link */
}
[/sourcecode]

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

Writer’s Block

Lol, writer’s block? Seriously?

No but seriously, it’s been about a month since I updated my blog. Maybe I’m just occupied by the website I’ve been developing this summer. Maybe it’s because I’ve been occupied by some of my other interests as well. Or, it’s probably both reasons. Or, maybe I just don’t know what to write about.

My blog does have different types of content after all. Which areas do I contribute content into first?

Anyways, that’s not the point. I’m here again, and I’m here to talk about what’s been going on the past 30 days, since I actually have the time to :D.

Hyakki's Corner
Hyakki’s Corner – Buying Games So You Don’t Have To

Aside from seeing my lovely friends everyday, it’s been a very productive month. Hyakki’s Corner (the gaming website I’ve dedicated 90% of my summer to) is making A LOT of progress. I’ll talk about the website more some time in the future, but I’m pretty proud of being able to see my own work out there on the web that the entire public can see. Though it’s not even close to being done, it’s really satisfying to be able to display my work to the entire world, and have another reason to play my video games: not only for my pure satisfaction and enjoyment, but because I can apply my writing abilities (I enjoy writing, by the way, which is why I have my own blog lol) by flushing out guides and reviews on Hyakki’s Corner for whatever games I enjoy.

Hyakki’s Corner and video games wasn’t all I wanted to talk about though. My laptop sucks. Like, really sucks, by my standards. I can do a whole lot on this laptop, and it’s probably more powerful than a lot of laptops out there, but it’s so frustrating to deal with. Blue screen of death. Screen locks. Slow performance. Constant disconnections from Wi-Fi. Actually I take that back, this laptop isn’t that powerful anymore. With 4 GB of RAM, and only 2.67 usable, and an lol-i3 processor, what the hell can you do at all? There’s so much I have to worry about with this laptop. Sure I can run skype, and do my programming on it, and browse the web, but I am so frustrating with how slow the laptop runs, especially when I have several applications and tabs open. I have to close several things when I wanna run a new application, and I always have to keep track of my Physical Memory and CPU Usage through the Windows Task Manager. It’s just, ugh. Which brings me to this bad boy:

new computer
AMD Eight-Core Processor @ 4 GHz, 16GB RAM, 2TB HDD, NVIDIA GTX 660 Ti

Okay, the image means nothing without some details on the specs, but I’m not sure who’s reading this so I’m not sure if talking about the details would be a complete waste of your time. You just basically need to know that I got this for $1100 (which isn’t bad honestly for its specs), and that it’s literally 1000x more powerful than my laptop. And with this computer, I get to play FFXIV 2.0 when it comes out baby! High settings too! And of course, I can do my usual computer programming, web browsing, photoshop, etc etc with no inconveniences (at least, less inconveniences). Overall, I’m happy with my purchase, even though it’s the most expensive purchase I have ever made in my entire life. But, since it’s not portable, I’ll probably buy a new laptop too at a bargain price, and leave my PC for use when I’m at my dorm at USF. Which I’m okay with.

And with that, I’m signing off for now. I wanted to talk about some job and internship inquiries that professionals have contacted me about this summer, but I’ll save that for another time. This post is getting too long anyways up to the point that you probably didn’t even read everything as you’re reading this last paragraph. On a final note, I’ll be uploading personal solutions to coding various sorting algorithms in programming, so look out for that if you’re a programmer!