Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

ian izaguirre
ian izaguirre
3,220 Points

How Can I recreate these transparent boxes on my website through css?

I cant figure this out through firebug for some reason but this website :

(http://davidjkayser.com/) has these black almost transparent boxes everywhere in its design. I wanted to know how they accomplished this ?

Any help would be greatly appreciated , Thank you :-)

3 Answers

Kevin Korte
Kevin Korte
28,109 Points

It's nothing more than a black background at 50% opacity.

It's this bit of CSS that's doing it.

background: rgba(0, 0, 0, 0.5);

Here, I made a test sample so you can see. It's a stripped down version to get a better grasp of the code.

http://codepen.io/anon/pen/GJFwd

Also keep in mind in order to make use of transparency in backgrounds you have to use rbg for color. You can't use hex.

Matthew S
Matthew S
Courses Plus Student 6,513 Points

Just to add rgba is great, but say for example you want to take a patterned bg and add transparency to the container holding the image; opacity: 0.8; works just as well. Just don't forget about filter: alpha(opacity=80); for older browser support.

rgba( 250, 250, 250, 0.8) 
opacity: 0.8;
filter: alpha(opacity=80);
ian izaguirre
ian izaguirre
3,220 Points

Hi, Thank you for all the responses. So I tried the following two codes as you can see the .divs under here:


 /* TEST */
.test-boxcontentone{
rgba( 250, 250, 250, 0.8);
opacity: 0.8;
filter: alpha(opacity=80); 
background: none repeat scroll 0 0 black;
color: #FFFFFF;                   
}

.test-boxcontenttwo{
background-color: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
margin-top: 1em;
padding: 1px;
position: relative;
left: 158px;                      
}

This is the test link you can view the codes on : (http://iamdentistry.com/test-page-teamtreehouse/)

It appears that only the second code yielded the desired effect.

My Questions are the following:

1.) Does my code look correct?

2.) To Display content inside this box with low opacity , would I create the box and set a width and height THEN create a span and place it inside so the text is not affected by the opacity ?

3.) Does how my second working code looks , work in all browsers? or does something more have to be added?

Thank you for all of your help

Matthew S
Matthew S
Courses Plus Student 6,513 Points

The first line on the first block does nothing rgba( 250, 250, 250, 0.8);

It has to be associated with an element like background-color, background, box-shadow, border, etc. That is why it appears there is no transparency being applied to the top box.

Jason Hess
Jason Hess
4,789 Points

You can remove the left positioning as well to center the transparent box and the position of relative. There are lots of emulators out their for testing for different browsers. The true test will be to just find machines with each of the different browsers and do the testing. You may not get true test results. If you try developing in the browser with a web-inspector, it may save you some time and headaches, it appears as if you have about 442 warnings/errors on your home page.

Looking good though, stay with it.

ian izaguirre
ian izaguirre
3,220 Points

Ok I will thanks for the tip. Thank you so much for this comment. What emulator do you recommend? and I know I have 442 warnings/errors but I am lost as to which files to locate to fix these errors? How can I find out if they are in my parent theme and what file in my parent theme the issues lie in? I really want to fix the errors. Thanks for your kind comment again , I will stick with it I am finding web design and coding fascinating and the journey of learning it all myself very rewarding.