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 David Waters
David Waters
Courses Plus Student 3,001 Points

challenge task 4 is broken. inset is the correct term, but it won't accept it.

I realize there could be human error. But no matter how often I review the video, I remain convinced that I am entering the details exactly the same as it should be. it won't accept inset as the term for inner box shadows.. what do i do to continue?

style.css 
/* Complete the challenge by writing CSS below */
.main-heading {
  text-shadow: 0 0 5px #be7b31;
}

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

.main-header {
  box-shadow: 0 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>

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi David,

Right code, you just need it on one line.

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

Hope this helps.

David Waters
David Waters
Courses Plus Student 3,001 Points

I'll give it a shot, but since this is a second box-shadow based on the example he gives in the video for more than one text-box shouldn't you be able to put the second box-shadow on the next line down?

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Looks okay to me.

For some reason, it doesn't seem to like the box-shadow at all and highlights it in white.

It's a long shot as current browser support is excellent for box shadow except in Opera Mini but is it asking for one of the browser prefixes like webkit?

-webkit-box-shadow; -moz-box-shadow, -o-box-shadow,

David Waters
David Waters
Courses Plus Student 3,001 Points

thanks for the feedback

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

A long shot, as I say, ;)

Did Wayne's suggestion work?

David Waters
David Waters
Courses Plus Student 3,001 Points

Yes, it passes the requirement. Thanks