This is Sasha and thanks for joining me here for another CSS training video where I share with you how to modify and manipulate your business page when it comes to CSS. It’s convenient if you have an online business. Now today, we’re going to take a look at the box-shadow property, and I’ll show you how to use it and how I use it. Let’s take a quick look.
What I’ve done here to illustrate this example, I have a div that’s a wrap and then a UL menu. We have an unordered list with three little menu items. That’s the only HTML that we have happening. Pretty much everything else is the menu except this wrap.
This is the div wrap that I have right there set up. The thing you need to pay attention to really is just this one line, and it’s this box shadow line, and here I have offset X offset Y, and then there’s a blur radius, and then you can choose your color. That’s the structure of this rule, the way that it’s set up with these attributes.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 3px 3px 5px #3a3a3a;
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
What you do is if you’re looking to create this little box shadow and you can probably see it right under the menu right there, typically when I span this menu, the reason I’ve done it only 400 is so that you could see the box shadow. But if I remove that, when I span that menu, you can see a little drop-down, and it’s convenient for that little shadow to show up right there.
What you can do is I can bump this to let’s say 12 pixels on the X, 12 on the Y and then 5 pixels on the blur. If I did only the X, let me go ahead and put the width back for you so you can see it in all directions to make it a little bit easier. If I did 22 on the X, you could see it moves that box shadow. If I did, let’s bring that back, if I did, let’s say, 40 on the Y, you can see it moves it down.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 12px 42px 5px #3a3a3a;
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
Y is up and down, X is left and right. Also, the other thing is this blur. How does this blur work? Well, if I have 5, it’s just a slight blur. If I have let’s say 15, you can see how it blurs that much more, okay? That’s adding a little bit of shadow.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 12px 12px 15px #3a3a3a;
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
How do I personally use it? Well, typically in menus, I do – sometimes a very soft shadow so I might do 5 pixels, it might be even 2 pixels or something like that, and then my blur might let’s say, maybe 4 pixels. You can see that slight little edge on the bottom and then I don’t usually use a hard color.
I do something very soft. You can see it right there under that menu because if I get rid of this, I’ll show you what that looks like, it’s just flat. It’s a flat view. If I add just a slight little shadow, it gives that bit effect and sometimes it’s convenient, you know, to split or provide a small dimension. That’s one way of doing things.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 2px 2px 4px #ccc;
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
There’s also a few other variations that you could do with this. For example if you’re looking for a color of, let’s just say, using RGB values and then alpha based values, so you could see I can do transparency. Let’s just do 0.5. You could right there, I could have a little bit of a transparent area with RGB A values.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
I could also do a box shadow inset, okay? Here’s a little bit of inset and I’m going to change this to 0.3 and 0.3 and make it gold and you can see that gets on the inside there. Now, when I roll over naturally that changes because I have hover property on there, but you can see the inside effect that happens and, let’s see, another one I want to show you and that is to create multiple box shadows.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: inset .3em .3em gold;
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
Here, if we do read and let’s make this blue, okay? You could see if I zoom out, I could create multiple box shadows, and the way that these works is you do one box shadow separate it by a comma and create a second one or a third one or a fourth one and that creates multiple box shadows for you.
The great thing here, of course, with multiple box-shadow is you could go ahead and, you know, change the colors to whatever you want. I could make it a green color there. I could also use the same kind of manipulation, you know, as far as the movement, the blur amount, let’s say here -1, let’s say 0.5 em on that one and 0.5 em there.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 3px 3px red, -1em 0 0.4em blue;
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
You can see I can overlay those or if I do a negative, you can do a negative. You can have a box shadow at the top, on the left, on the bottom, on the right. It creates that effect.
If you ultimately want kind of like a glowing shadow, you could do, let’s say, maybe 0 pixels and 0 pixels and then you have a 5 and then you get kind of this glow effect. You could do maybe 15, and you can see how that creates that kind of glow effect box around that one.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
body {margin:30px 0;}
.wrap {
display: block;
background: #42c494;
overflow: auto;
margin: 0 auto;
width: 400px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 0px 0px 15px red;
}
.menu {
list-style: none;
margin:0; padding:0;
}
.menu li {
float:left;
font-family: gotham;
color: #fff;
padding: 15px 20px;
cursor: pointer;
border-right: 1px solid #ccc;
text-shadow: 0px 0px 2px #1f705a;
}
There’s a lot of ways to use this box-shadow property. It just comes down to what you’re trying to do. As you can see, there’s a subtle view right there. We’ll make it a little darker so you could see it. It creates a bit glow around that.
That’s the box-shadow property, and it’s convenient to add subtle effects. I don’t recommend you do it, you know, very strong unless you’re looking to do that for a purpose. For example, I try to avoid things that are very stiff like that in here unless, of course, your design calls for it.
