Hello,
I have a question with the box-shadow. In the exercise here, shadow-box is used like this
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
In the descriptions above the example, it says, it has “the attributes of offset-x, offset-y, blur-radius, spread-radius and a color value.” I dont see anything about the first attribute which is “0”.
I looked in the internet and couldn’t find the attribute. In the exercise i try to omit it and it also have the affect but i dont understand what it does.
Can anyone explain it to me please?
Thanks in advance.
The 0 is the x-offset. If you omitted it (using the first box-shadow value as an example), the browser will take 10px as the x-offset and 20px as the y-offset.
I know basically nothing about CSS so please someone correct me on this but I think the first value is the offset-x (even though it doesn’t have px I think you can exclude px because the value is just zero?) The reason that you can take it out and put it back in is because it’s essentially setting it to it’s default position, and because the blur-radius and spread-radius are optional, it just changes offset-x to 10px(from 0px) and offset-y to 20px(from 10px). If you want to test this just go to the lesson and change the box-shadow line to something like box-shadow: 105px 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); All I’ve done with this is change the first value from 0 to 105px and the x-offset changed. Hopefully this answered your question! <3
Yea silly me =). Thanks again
1 Like