Student Question:
“I have a question about the box shadows: what if you don’t want the box shadows to appear on the right and bottom of the box? The code that we used (ex. -webkit-box-shadow: 1px 1px 4px black;) doesn’t specify locations. What if, instead, I wanted the shadows to appear on the top and left sections of a box?”
Response: “As far as the controling the placement of shadow effects… just a guess, try putting in negative numbers and see how that affects it. Remember, the numbers indicated pixel locations.”
“Why are there negative numbers here?”
“Are you asking why I would try a negative number?”
“Yes, I’m asking why using a negative number would be different than using a positive number. This is the only code we’ve seen that can use negative numbers, and I don’t understand why.”
Let’s go into more detail
Do remember the cartesian Coordinate system from High School geometry? http://en.wikipedia.org/wiki/Cartesian_coordinate_system. It is simply a way of representing 3 dimensional space on a 2-D surface.
Think of the browser window as having a x, y, and z axis (actually it does). The x-axis is horizontal. The y-axis is vertical. The z-axis is perpendicular to the window. In geometry we learned that positive numbers are to the right and negative numbers are to the left. A location of any point in the window is relative to a point of origin. The point of origin, i.e. (0,0,0) in a browser window is the upper left-hand corner of the window. Positive X values are to the right. Positive Y values are towards the bottom of the screen. Positive Z values are coming out of the window towards you. Therefore, the negative directions of each axis are in the opposite direction.
In the case of working with drop shadows in CCS3, we use the following syntax…
box-shadow: h-shadow v-shadow blur spread color inset;
where
- h-shadow is the horizontal distance
- v-shadow is the vertical distance
- blur is the blur distance
- spread is the size of the shadow
- color is the color of the shadow
- inset [optional] changes the shadow from an outer shadow to an inner shadow
The distance parameters of the drop (box) shadow are relative to the location of the element that they are affecting. So a 10px distance for h-shadow would be to the right of the element. a v-shadow value of 10px would be under the the element; i.e. towards the bottom of the screen. Consequently, if you use negative numbers, the directions would be in the opposite direction of the relative axis.
Examples:
Positive direction , box-shadow: 10px 10px 5px #888888;
negative direction box-shadow: -10px -10px 5px #888888;