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

Ali Raza
Ali Raza
13,633 Points
Posted by Ali Raza
Ali Raza
13,633 Points

it's not working I've included .main-header { box-shadow: inset 0 0 60px 5px firebrick;}

Challenge 4 of 4

I've even tried with including "comma" and adding a values again with/without including the property "box-shadow" in the rule but for some reason it isn't working.

Can someone please help

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;}

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

3 Answers

jaredcowan
jaredcowan
11,808 Points

You're very close.

When declaring a second set of rules for box shadows on the same element, you separate them by commas. You don't redeclare a class. 

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

Edit- Here is a link for you to reference. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Ali Raza
Ali Raza
13,633 Points
Ali Raza
Ali Raza
13,633 Points

Thanks Jared, you're awesome!

jaredcowan
jaredcowan
11,808 Points

Glad it worked for you!

Aaron Selonke
Aaron Selonke
10,323 Points
Aaron Selonke
Aaron Selonke
10,323 Points

In the teachers notes there is this site

http://markdotto.com/playground/3d-text/

where instead of the the box-shadow is declared for each additional box