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

Oliver Sewell
Oliver Sewell
16,425 Points
Posted by Oliver Sewell
Oliver Sewell
16,425 Points

how do i add 2 box-shadows , code isnt working :*(

hi im trying to add 2 box shadows for a task one with a inner shadow it says i need a comma between somewhere but its not working

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

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:inner 0 0 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

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Danielle Salandro is very close, I think. Try this instead:

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

The word inner was supposed to be inset, and that was throwing the challenge engine off a bit. Sorry about that!

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

thankyou it worked , inset and inner confused me a little :D

Ivan Villa
Ivan Villa
8,597 Points
Ivan Villa
Ivan Villa
8,597 Points

This worked for me! but the issue I had was that I wrote 0px instead of just 0. not sure if that the editor or you cant actually use px when.

Danielle Salandro
Danielle Salandro
19,637 Points
Danielle Salandro
Danielle Salandro
19,637 Points 
.main-header {
box-shadow: 0 2px 15px #aaa, inner 0 0 60px 5px firebrick;
}
Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

Ooops its not working it says the second box's horizontal ofset needs to be 0 i thought it already is 0 can someone help