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

CSS

Posted by Laura Cressman
Laura Cressman
12,548 Points

Box Shadow?

Hi everyone,

I am trying to make a box shadow on my title element, which is a h1. My CSS is below. Why won't it show up? Is it because I'm applying it to a h1, or something is wrong with my CSS?

Thanks, Laura

#title {
    background-color: #036;
    color: #0F0;
    font-size: 2.2em;
    text-align: center;
    width: 100%;
    padding: 0.5% 0;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

3 Answers

Peter Burdette
Peter Burdette
3,701 Points
Peter Burdette
Peter Burdette
3,701 Points

Try using text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); <-- (Adjust the px to whatever fits your design)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I put your code into codepen, it looks fine in the latest Chrome, latest Firefox & IE 10.

http://codepen.io/jamesbarnett/pen/uscki

Here's a screenshot of how it looked:

Imgur

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Thank you both. James, I realize the problem is that an element directly below the title bar is obscuring the box shadow because it is being rendered after the title bar. Would z-index be the fix for this?

James Barnett
James Barnett
39,199 Points

> Would z-index be the fix for this?

Yeah that should probably do the trick.