box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
				
			

Video Summary

Alright, we’re going to talk about the box shadow effect for cards. And really what this does is it layers two different shadows behind the element or card that you’re using to create a more levitating effect. It really makes it look like it’s hovering off of the page. And before we start breaking down what all of these all these characters mean, I do want to explain that this from the box shadow all the way to the semicolon is one declaration. I put this on three different lines and I will do this when we get into code pen. Because this is a lot of characters to have on one line. And I really like to have a look of this is the first shadow in effect, this is the second shadowing effect. So I’m going in and we’re manipulating this. 

It’s gonna make things a lot easier, but I do want to say that this is considered one total value that is separated by a comma here. Alright, so the first one is the first shadow and the second one’s a second shot. So let’s hop over and start breaking this down a little bit. So what I want to why I want to stay to is that these these first numbers and the last numbers before the color need to be zero. They don’t have any effect when it comes to this box shadow card when you were doing the card effect for these back shadows, right. So this this first number where we’re actually having units of measurement. This is where we’re dictating the center or the positive is the bottom negatives of top right. The second string of or the second units of measurement is the blurred distortion in pixels. 

And we have just a RGB a so this is a transparent image. So as I was talking about in the basic, The basic box shadow tutorial, that we’ve tried to use the RGB A, where we’re trying to have a transparent color, but there was nothing behind it to be able to have that effect. But now that we have two different shadowing effects, we can really play around with the shadows and be able to really manipulate the way that we want to do. So I think we just hop over to code pen and see what we can do with this card effect.