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 Foundations Text, Fonts, and Lists More Text Properties

Posted by Anup Sheth
Anup Sheth
18,090 Points

Multiple Shadow Values

Hi everyone,

I have a question about the CSS More Text Properties lesson. I understand the basic values for the text-shadow property, but Guil lost me when he started covering multiple shadow values. In the code below, I don’t understand the inclusion of all the zero’s in the code. What do they mean?

<p>text-shadow: 0 -1px #767676, 0 -1px #262626, 0 0 8px rgba(62,106,168,.8);</p>

Thanks in advance for your help!

Anup

2 Answers

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi, The first property is the x-position, 2nd is y-position, 3rd is blur and 4th is the color. The zero's mean there is no value for the corresponding property. So: 

#element {
text-shadow: 1px 0 5px #000;
}

Means give the element a text-shadow that is offset by 1px on the x-axis, offset by 0 pixels on the y axis, with a 5px blur and a color of #000 (black).

Check out CSS Tricks - Text shadow and MDN - textshadow for more info.

Hope this helps!

Anup Sheth
Anup Sheth
18,090 Points
Anup Sheth
Anup Sheth
18,090 Points

That clears things up! Thanks for your help!