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
jeanie
4,602 PointsBox-shadow: the last one will appear at the very bottom?
Hey you can refer to video of box shadow in which renders at 5:39.
box shadow: 2px 2px 15px 5px blue, -2px -2px 15px 5px red, 0 20px 25px -8px #000;
In video, it's said like this, "Just remember that the first shadow specified will appear on top, and the last one will appear at the very bottom."
I knew (2px 2px 15px 5px blue) applied to right and bottom, (-2px -2px 15px 5px) applied to top and left, but what about (0 20px 25px -8px #000)?
I didn't understand what did the last shadow stand for since I couldn't see #000 black color appear at the bottom of box.
7 Answers
sanjana porwal
4,080 PointsEvery time when you add any values to shorthand properties they are added in clockwise direction. If 4 values are added then it means TOP-RIGHT-BOTTOM-LEFT, if 3 values are added then TOP-LEFT&RIGHT-BOTTOM, if 2 values are added then TOP&BOTTOM-LEFT&RIGHT so here
first value: 2px 2px 15px 5px blue: it is for TOP Second Value: -2px -2px 15px 5px red: it is for LEFT & RIGHT Third Value: 0 20px 25px -8px #000:it is for BOTTOM
jeanie
4,602 Pointsoops! But I checked the video, by refreshing the page, the bottom of box shadow appeared to be blue color instead of #000, black color. Top and left appeared to be red while bottom and right appeared to be blue. That's why I am curious about (0 20px 25px -8px #000). The bottom of box-shadow should be appeared as black right? However, the video showed the opposite way. Maybe you can checked the video.
sanjana porwal
4,080 PointsIn the video issue is causing due to blur and spread radius. As both the radius are applied the colors are mixing due to which you are getting confused. In the video when the page is refreshed and the effects are shown the black color appears in the very bottom of the div because of x & y offsets. I had created an example to demonstrate the point please go through it. http://jsbin.com/dupixixo/1/edit?html,css,output
I had tried to keep the same values but to show the colors properly I had change some offset values.
jeanie
4,602 PointsWOW!!! Thanks Saujana! You wrote me explaination in a very detailed way. I did appreciate for your efforts on helping me to figure out my confusion. Thanks very much ^.^
sanjana porwal
4,080 PointsIf it helps you please mark it best answer, it will help me improve my profile. Thanks
jeanie
4,602 PointsMay I know where can I mark best answer?
sanjana porwal
4,080 Pointsbelow each comment you can see the options Add comment and best answer from there just click.
jeanie
4,602 PointsBest Answer