Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
ian izaguirre
3,220 PointsHow 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
28,148 PointsIt'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.
ian izaguirre
3,220 PointsHi, 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
Courses Plus Student 6,513 PointsThe 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
4,789 PointsYou 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
3,220 PointsOk 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.
nik
8,925 Pointsnik
8,925 PointsAlso 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
Courses Plus Student 6,513 PointsMatthew S
Courses Plus Student 6,513 PointsJust 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.