box-shadow: 5px 10px 5px #888888;
				
			

Video Summary

Alright, in this lesson we’re gonna go over the blur box shadow. And it’s very similar to the basic box shadow but we just add another unit of measurement between the color and the second unit of measurement. And basically what this unit of measurement does is how much blur or distortion in pixels you want for your, the shadow that you the shadow effect that you are creating with this property. I think the best way to show you this is just to hop over to code pen and show you the results. So right here we are looking at just a simple paragraph I labeled this blur and I have the CSS code as a blur. 

I made the width just a little bit smaller. I made the height 100 paddings, a little bit bigger 15 pixels, I made the margin 30 pixels so you can push it off just a little bit over here and what I want and I made the background black and the color white just to give you another effect. You can make this even though you can change the colors, anything that you want. But I just want to show you some different examples on as we go through. So right here we have 10 pixels by 10 pixels. Now we can make this 100 pixels if you wanted to. But it basically just moves the shadow just a little bit over 100 pixels. And it doesn’t really give it that great of an effect. So keeping the numbers small, tends to have a better effect. But now let’s just say if we just take this out, we have the basic effects right. So what happens if we already put in five pixels, we have a little bit of distortion. 

But what happens if we say what it’s 20 pixels? How does that look? It’s a little bit more distorted. It’s just a little bit. You can see a little bit of a glowing effect and what happens if we do 50 pixels gets a little bit wider and a little bit more distorted. You can’t really see the effect that much. So usually right around five maybe actually, I think maybe 10 pixels. 10 pixels is a nice kind of shadow effect instead of maybe light blue wants the more typical shadow. And the same principles go for negatives so if you wanted to have the sun coming from the bottom or the light coming from the bottom, we could have it set up to the other side. And you can just go around and play with this and just see how it looks for what you’re trying to accomplish. More times than not when you’re dealing with this box shadow effect. 

And you’re using the blur function or the where values you’re going to be when you’re in WordPress, you’re going to be manipulating someone else’s code. so someone might have made a box shadow effect and maybe you want to make it a little bit larger, maybe change the direction, maybe change the color. and this is how you’re going to be able to set that up. So with this one let’s figure out how we can extend this blur function and create a more dynamic effect. See you in the next lesson.