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

Posted by Jorge Vazquez
Jorge Vazquez
2,890 Points

Just like the text-shadow property the box-shadow can take multiple comma-seperated values to add additional shadows to

i am stumped!

1 Answer

Juan Guillermo Mariño
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 Points
Juan Guillermo Mariño
.a{fill-rule:evenodd;}techdegree seal-36
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 Points

Hi jorge! Well... the text-shadow property and the box-shadow property have many values in common, however the box-shadow property has some values that the text shadow doesn't have, for example the values of: inset and spread, the rest of the values of exactly the same. So I am going to give you 2 examples in the most common used values.

First let's try out the most common ones on text. So here you can see the values represent: horizontal-shadow, vertical-shadow, blur-radius, and color

h1 {
    color: midnightblue;
    font-size: 40px;
    text-shadow: 2px 2px 2px blue;
}

Now let's try out the most common ones on text. And here you can see the values represent: horizontal-shadow, vertical-shadow, blur-radius, spread, and color The spread is optional and it represents the size of the shadow, this value is not available in text-shadow

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: 10px 10px 5px 1px #888;
}