This is Sasha and welcome to another CSS training video where I share with you some insight on how to modify and manipulate your business website when it comes to CSS. Today what we’re going to do is take a look at the text-shadow property. Let’s check it out.
Using the Text Shadow Property
Here I have a basic menu setup. It’s a couple of little buttons. You can see it stay with HTML just a wrap with the menu, so it just style just very merely as far as the menu goes and the menu is a concern. I’m going to zoom in on this because it’s the easiest way to show you what the text-shadow property does really and it’s handy for specific instances when you want a little subtle text shadow or like a drop shadow on your text.
What you can do is type in right here if you search for it, text-shadow, I’m going to hit tab, and that’s the property that we’ll use. As you zoom in, again, it goes x-axis, y-axis and then your blur radius and your color. This is how the property is formed.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
.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: 10px 0 5px #3a3a3a;
}
.menu li:hover {
background: #344fad;
}
First, we go, let’s say, x-axis, I’ll do 0 on the y-axis, let’s say 5 pixels on the blur, and I’ll do kind of like a dark gray. You can see the x-axis right there, how it moves, let me remove this hover effect real quick, and you can see that right there how it moves that over if I just did a blur radius of 1, you can see the text shows up really well, you know, if that is 0 blur radius, it’s almost duplicated.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
.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: 10px 0 0px #3a3a3a;
}
The x-axis right here, the 10 pixels, allows you to move it 10 pixels left or right. If I did 5, it move 5. If I did 2, it would move 2. If I just did 1 pixel, well, then it moves 1 pixel. Now, the next one is the y-axis so again I could do 1 pixel also to the downside, okay?
It’s 1 left and 1 – or 1 right and 1 down, I could put this as a negative value, right? Just like what the positive, I could do a -5, so you could see that goes up and you can do the same thing with the x-axis. But let’s just say we want 1 pixel down, okay? You have a blur radius. You can see right now it’s perfect but if I did 1 pixel on the blur, you can see the text gets a little blurry. If I did 3 pixels, it gets even more blurry.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
.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: 1px 1px 1px #3a3a3a;
}
That’s kind of how you use this text property. If I did just 0 and 0 here, you could see how it’s just using that blur property, and I could use only 2 pixels right there, and it gives you that subtle effect. Usually, this is a little strong for me in my taste. If I do like a dark green, sometimes this is handy for those instances when you have a green, you just put a little bit of a darker green property.
If I do that and you hit refresh, it may not seem like a lot right there, but it does have a little bit of a change in effect once you start looking at it. Let’s see here, so there you go. You can see it’s very, very subtle, okay? You could barely tell that it’s there, but it gives you that little bit of something. If I remove that, take a look, and you’ll see it’s gone.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
.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;
}
Add it back, and you can see just a little bit, remove it and there you go, okay? If you want it dark or stronger, you can do it like this but once you zoom out of it, you know, it’s going to be just very subtle, little light effects to make things different.
Anyways, that’s how you use the text property. Again, it’s the x-axis, the y-axis, the blur amount and then the color. So let’s take a look at the box-shadow property. It’s going to be similar to this. We’re going to take a look at that in the next video. That’s how you use the text-shadow field and rule.
