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

Kendall Coates
PLUS
Kendall Coates
Courses Plus Student 1,051 Points
Posted by Kendall Coates
Kendall Coates
Courses Plus Student 1,051 Points

Adding a second set of box shadow

I have to add a second set of box-shadow values adding an inner shadow however I don't recall them going over this in the video so cannot figure it out?

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,
  box-shadow: inset 0 0 60px 5px color: 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>
Gaia Dragonfly
Gaia Dragonfly
4,546 Points
Gaia Dragonfly
Gaia Dragonfly
4,546 Points

He explains the multiple shadows in the first video "Text Shadows" in 3:50. You separate the lines of shadows using commas and end it with a semicolon. for example: 

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

1 Answer

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Hi Kendall,

You have a few issues with your CSS here. Notice that you have a comma trailing your first box-shadow property. You can either change this to a semicolon, or remove the second "box-shadow:".

Another issue is that you've written a color property inside of the second box-shadow values. Remember that you don't have to explicitly write out the color property for box-shadow since it accepts a color as one of the values. Box-shadow will know it's a color by default, [see here]https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow for more details.

I've written out examples just in case - 

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

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

Either of these will work, even though the challenge is really asking for the first version. Personally, I like the first one, I find it to be a little more readable.

Hope this helps!