Video Summary

Alright guys, we’re going to talk about the card effect for the box shadow property. And let’s just break down the code real quick. I got a p tag up here. I use the class card. I’m calling to that class right here for the CSS. I put a simple border around this paragraph I made the radius 25 We had the padding 10 pixels, the width 25%. I made the margins 3030 pixels just to push it away from the screen. And let’s look at the box shadow effect right down here. So what we’re looking at right here, is that this we’re having essentially having to buy or to buy box shadows. That is the perfect size of what this card is, right? So I’m gonna show you what I mean. So what happens if we make this 150 pixels and we want to push that down 150 pixels, right? And this is pretty much a perfect outline of this p tag. And what happens if we make this 300 pixels. 

So now we have another pretty much identical size, but a different box shadow? And what happens when we start playing around with this? 

So let’s start off by playing with the distortion effects. So what happens if we want to take the first the first box and let’s make this 50 pixels? 

Right? We just distorted that. 

That blurry or we distorted the box shadow we made a much larger blur effect. And what this reminds me of is that when you were writing on paper with a pencil, and you wrote too hard, and then you hurried up and erased it and you could never get it off, right? This is what this reminds me of. 

And the same thing with down here we could do what happens if we don’t distort or distort that much less due to pixels, right? We don’t have that much distortion. It almost looks like a transparent color. So let’s bump this up to list at least 10. So we got a decent blur going on over here. Now let’s play with the RGB a. So this is the color and we’re using the reason RGBA to get that transparent color going on. So if we came here and we put in one and we took this distortion effect, we put in zero pixels. We just have a black outline of what this the outline of this p tag. Right that we’re using for the paragraph. Now if we do say let’s go to point three. 

Now, if we don’t have the distortion, we just have a lighter color. And what we’re looking at here with these three zeros is 000 is the RGB color of black and we are using an opacity feature right here at point three which makes it just a lighter gray, but we need that distortion in order to really see that effect. You know come to life now we can always just make these distortions a little bit bigger, a little bit lighter. We’ll say maybe we’ll do point four. Alright, so now that we understand this, and another thing too is we can take this and we can put this to the top as well. So if we do negative 10. 

Now we have a distortion effect up here. And if we want to we could do 10 here and see what that looks like. 

So now we have a harder distortion effect at the bottom, and a lighter distortion effect at the top. Maybe you want to not have maybe you want to have you’re trying to overlap that to give a double shadowing effect and make that look like there’s like you almost peel this card right off the screen. So essentially, this is what the box shadow card effect does, is that it gives you two different layers that you can play around with. 

There’s not much you can do from left to right. But what you can do is you can create a larger distortion to make the sides and the thin potentially the top. Give it that effect. And when you hop in here and you’re playing around with this all this is very subjective. It just depends on what you like and what you think looks good. And really, you know, when you’re playing around with the distortion and the size, you’re more or less more than likely you’re kind of trying to get or you’re playing around with maybe 5% efficiency you might you know, you might find might spend like 10 minutes going well what if What is this 40 pixels distortion look like? Oh, that looks a little maybe what about 20 You know, I like that a little bit better. But in all actuality, you don’t have to spend a ton of time on this. The effect works the same once you find that you find something that looks good, just roll with it. And keep you know, keep moving on to the next section. But one thing that we will do and will encounter as WordPress developers is that we will find that the developer for this theme that we’re the thing that you choose for your website may use this box shadow in effect, and you might want to change just the direction of it. You might want to make it a little bit darker, depending on what your background color is. And you might even want to make the color for your shadows. A little bit different. And since we’re using RGB A, it makes more times than not it makes sense to have a dark color a black or a gray, because that’s what most shadows look like and that’s what gives us a natural levitating effect. But let’s just say if we wanted to, change these colors, you can make it you know a red or color, whatever, whatever RGB color that you want to use. So let’s just keep going with us and see what colors we can come up with. 

Let’s do 110 Alright, so now we made more of a purple effect. So these are some things that you can play with this box shadow card. and this is one of the most common ones we will run into as WordPress developers. but it is a very cool fact I didn’t want to take the time to show you how we can manipulate this and how you can really make your elements jump off the page. So let’s hop on to the next section.