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 Gradients

Posted by Raedawn Long
Raedawn Long
6,943 Points

Hello, setting up color stop and direction.

I am setting up color stop using background-image with dark blue and light blue colors with 90 % behind second color, and gradient setting going from top to bottom, I placed direction going from top to bottom behind second color and before first color, not accepting either code, any suggestions?

Thank you, Dawn

style.css 
/* Complete the challenge by writing CSS below */
.main-header {
  background-image: linear-gradient (steelblue, darkslateblue 90%, bottom to top);
}
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 -->
  </body>
</html>

6 Answers

Eduardo Valencia
Eduardo Valencia
12,444 Points
Eduardo Valencia
Eduardo Valencia
12,444 Points

Hey. The direction should go first, and the direction you are looking for is to bottom, like in the following:

#fake-element {
    background-image: linear-gradient(to bottom, steelblue, darkslateblue 90%);
}

Hope this helped!

Raedawn Long
Raedawn Long
6,943 Points
Raedawn Long
Raedawn Long
6,943 Points

Thank you Eduardo, but its still giving me error message Make sure you're setting the first color stop value to 'steelblue'.

Eduardo Valencia
Eduardo Valencia
12,444 Points
Eduardo Valencia
Eduardo Valencia
12,444 Points

Hi. I think that is because the challenge says that the direction was supposed to be from Botton to top, and not from top to bottom. So just replace the direction to to top and it should work.

Raedawn Long
Raedawn Long
6,943 Points

hey, thanks again but the same error message keeps popping up, this is what I have coded. .main-header { background-image: linear-gradient (bottom to top, steelblue, darkslateblue 90%,); }

Eduardo Valencia
Eduardo Valencia
12,444 Points
Eduardo Valencia
Eduardo Valencia
12,444 Points

Perhaps you should try:

.main-header {
    background-image: linear-gradient(to top, steelblue, darkslateblue 90%);
}

instead of bottom to top. Also, I'm not sure whether this makes any difference, but you should probably remove the extra comma after 90%.

Raedawn Long
Raedawn Long
6,943 Points
Raedawn Long
Raedawn Long
6,943 Points

okay awesome!!1 that worked, thank you again, sorry to be such a bother, but im extremely pressed for time as for I have a November 3rd deadline. Thank you so much for all your help! Could you look at another question for me with box-shadowing?

Raedawn Long
Raedawn Long
6,943 Points
Raedawn Long
Raedawn Long
6,943 Points

hello again, any help with box shadow in css? I have tried numerous times with this question, however it keeps saying I am incorrect. It asks for inner box shadow values of horizontal and vertical values of 0, 60px radius, 5px width. I feel like I am putting in correct code, any suggestions? 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: 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>