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 Myles Chandler
Myles Chandler
2,184 Points

im only using 1 comma and its still not working what am I doing wrong

Im pretty sure im following the correct instructions but still not working

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

.title {
  text-shadow: 1px 3px 0px #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

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

I got it man sorry for the first error. For the second value, you need to define inset first before the horizontal and vertical axies and blur. Something like this bro. I hope it helps you or you understand it now.

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

I think inset have to come at the beginning of the code first. Try something like this

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

}
Myles Chandler
Myles Chandler
2,184 Points

I was able to do it by having everything in one line and removing the px from the 0's... idk

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Myles,

You can pass it on 2 lines like you had it but this challenge is having a problem with '0px' and is requiring that you remove the 'px'

Outside of the code challenge the '0px' would be ok.

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

Just to add that the inset you can put at the end after the color too but never between the rest or will not work.

and 0 pixels does not exist so remember never put 0px just 0 or most of the times can cause problem in your CSS file.

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

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

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

}


/*OR*/

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