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 CSS Basics (2014) Enhancing the Design With CSS Text Shadows and Box Shadows

Posted by MUZ140812 Phumza Malumo
MUZ140812 Phumza Malumo
6,496 Points

Let's give.main-header an inner shadow with a second set of box shadow values...

I am stuck. Been on this for the last hour! Please help.

style.css 
/* Complete the challenge by writing CSS below */
.main-heading { 
  text-shadow: 0px 0px 5px #be7b31;
}
.title {
  text-shadow: 1px 3px 0 #e59740;
}
.main-header {
  box-shadow: 0px 2px 15px #aaa, inset 0px 0px 60px 5px firebrick;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

3 Answers

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Phumza,

Your code is close to being right - I got the challenge to pass with the following code:

.main-heading {
  text-shadow: 0 0 5px #be7b31;
}

.title {
  text-shadow: 1px 3px 0 #e59740;
}

.main-header {
  box-shadow: 0 2px 15px #aaa,
              inset 0 0 60px 5px firebrick;
}

Remember you don't need to affix the px to a value for zero in these. Hope this helps.

MUZ140812 Phumza Malumo
MUZ140812 Phumza Malumo
6,496 Points
MUZ140812 Phumza Malumo
MUZ140812 Phumza Malumo
6,496 Points

Thanks. Haven't tried it yet but i'm getting frustrated with this program. Why is are so many questions a trial and error issue when it should be a set answer? Should i have known to continue in the next line?

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Yes - it can be frustrating at times, although I believe Guil does say that it is a better practice to split multiple box-shadow values across multiple lines but that may just have been my understanding. You just have to keep going, and regarding a set answer, sometimes there is more than one way to complete the same objective.

Allison Walker
Allison Walker
17,137 Points
Allison Walker
Allison Walker
17,137 Points

I am having the same issue, but I put inset at the end. 

 box-shadow: 0px 2px 15px #aaa, 0 0 60px 5px firebrick inset;
}

I don't think that the example above should work as written because inset needs to come at the beginning or the end. The extra return in the formatting shouldn't be making a difference.

I believe it should work like this. The example if found on www.css3.info gives the syntax like this: http://www.css3.info/preview/box-shadow/ box-shadow: 10px 10px; box-shadow: 10px 10px 5px #888; box-shadow: inset 2px 2px 2px 2px black; box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;