Box Shadow Bumble

HTML-CSS
1

Applied Visual Design: Add a box-shadow to a Card-like Element

The box-shadow property applies one or more shadows to an element.

The box-shadow property takes values for

  • offset-x (how far to push the shadow horizontally from the element),
  • offset-y (how far to push the shadow vertically from the element),
  • blur-radius,
  • spread-radius and
  • color, in that order.

where the color is in the r g b a format

so one of the box-shadow codes they give you to plug in for this exercise is

0 10px 20px rgba(0,0,0,0.19)

so how does this code correlate with the 5 box-shadow properties listed above?

0 is a mystery

10px I assume is the X

20px I assume is the Y

r g b a is the color

so is there a - blur-radius - spread-radius - in this code?

They defined 5 properties then only give 4 of which the first (the 0 value) is a mystery.

I think this particular lesson could have been a bit clearer.

2

Yeah, that’s a bit odd. I would read up on it here.

3

This is also a great reference for CSS stuff.

4

That’s great Kevin. I appreciate the homework assignment. Really! :relieved: