Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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