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 hipolito bonilla
hipolito bonilla
Courses Plus Student 1,100 Points

i dont get it

how can make this work its hard am a beginer :(

2 Answers

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Just re-watch it and well, learn. The first step is always the hardest. Go with the flow, and comeback to it, making your own project on the side to apply what you have learned.

You have an excellent explanation here above from Michael.

Michael Afanasiev
PLUS
Michael Afanasiev
Courses Plus Student 15,596 Points
Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Hipolito!

Since you did not put any of your code, I have no idea where you got stuck, but I know the feeling of getting stuck and not being able to get something, so here's the answers for this quiz:

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

The values for the text-shadow property are as follows; horizontal offset, vertical offset, blur, color. or horizontal offset, vertical offset, spread, color.

for example: 

.class {
     text-shadow: 10px 10px 5px white;
}

or

.class {
     text-shadow: 10px 10px 5px 5px black;  /* 4th value is for spreading */
}

The inset value is optional. inset changes the shadow from an outer shadow (outset) to an inner shadow.

Here's an example:

.class {
   text-shadow: 5px 5px 10px blue; inset 10px 10px 2px tomato;
}

Please don't just copy and paste to pass the quiz, understand the question, review the code, and only then continue to the next step.

Hope this helps!