Please explain: Add a box-shadow to a Card-like Element

HTML-CSS
1

Hi, I’m currently going through the Curriculum on Applied Visual Design, section on Add a box-shadow to a Card-like Element.

On looking at how it is explained in the chapter and what it says in w3schools.com and cssreference.io, I’m having difficulty getting any clarity on what each value is in the chapter’s example.

Can this be broken down to explain what each value is in relation to the box-shadow definition?
Thanks.
Scott

2 Likes
2

Hey @scottwhatever, Read this article:

It helped me to understand box shadow. Hope that it will be helpful to you also.

1 Like
3

Wow, thanks for that @Ujjwal1604 !
That was a big help.
I can’t understand why FCC just didn’t put in a simple example, explain it and let you know that they are so many different possible syntaxes you can use, and give the link to the standard documents covering it.
Anyway, I’ll never understand humans… always try to make things more complicated than they need to be…
Here’s to getting through to the end of the course sometime this lifetime!!
Cheers,
Scott

4 
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px red, -10px -10px 5px blue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>

In the “box-shadow” property of above code, the first property represents the pixel of shadow horizontally whereas the second value represents the vertical measure. The third value of the “box-shadow” property determines the blur effect of the shadow and lastly, I have mentioned the color of the shadow.
In addition, you can use multiple Shadow in a single Box just using a comma ( , ) between the values.
Tips: The value can be negative as well. When you put a negative value, you get the same opposite result.
For better understanding, You can read this article on How To Create Box Shadow With CSS Which I found very helpful.
Thanks :slight_smile:

3 Likes
5

Thanks, Salehin96
I was about to ask for a simple guideline where i can find the details of Box Shadow. Your explanation helped me a lot. Specially the syntax provided at http://fluentthemes.com/create-box-shadow-css/
Keep helping us like that :slight_smile:

1 Like
6

You are welcome Max1989 :slight_smile:

7

Guys, but there is one value that you are missing and is equal zero:
box-shadow: 0 10px 20px rgba(0,0,0,0.19);
What does zero stand for in this case. W3Schools doesn’t help here, neither FCC.
I have no problem solving cases, but In the same time I would love to understand more.