Tell us what’s happening:
I am confused about the instructions and the example that were given. I get that the box-shadow properties are supposed to go in the order they said (offset-x, offset-y, blur-radius (optional), spread-radius (optional), color value) but the example does not seem to be following the order and does not help me at all. Can someone break it down for me and tell me how box-shadow: 0 10px 20px rgba(0,0,0,0.19) 0 6px 6px rgba(0,0,0,0.23) complies with the order at all?
Your code so far
I don’t have any code. I’m clueless as to what to type.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.
The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card.
Here it’s saying to create a css rule to target the element with ‘id=thumbnail’ ( i think how to create a css rule is explained in the previous lessons)
The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card.
Inside the rule you created in the first step put the css declaration provided in the example
I’ve found the main point of my confusion. What is the “0” for? You know, the one at the beginning of the shadow declaration. 0 10px 20px rgba(0,0,0,0.17)… It did not say anything in the text as to what its purpose was.
I saw another similar question around in these days: I think is a kind of suggestion, or something like that
It did not say anything in the text as to what its purpose was.
offset-x (…), offset-y (…), blur-radius, spread-radius and a color value, in that order
I think people seeing a 0 value and after that two values it immediately link those values to x-y coords, even if the instruction clearly says that the first value is offset-x ( probably using two shadow together is not first-time friendly too^^)
Anyway, what I suggest you to do is to put 0 as third value in both shadows.
Removing the blur will let you see clearly what’s happening: you have two overlapping shadows on the bottom side of the box and nothing else ^^
