Lesson 19
Adding a Text Shadow with CSS
This lecture teaches you how to create a text shadow with Cascading Style Sheets (CSS).
You learn that a CSS property can have more than one value, each separated from the other by a whitespace.
The lecture shows how you can calibrate the text shadow using the browser developer tools (DevTools).
Summary
# Summary of Text Shadow in CSS
In CSS, you can add a shadow to text using the `text-shadow` property, which allows for multiple values separated by spaces. The syntax for this property consists of four values:
1. **X Offset (horizontal)**: Determines how far to the right (positive value) or left (negative value) the shadow appears.
2. **Y Offset (vertical)**: Determines how far down (positive value) or up (negative value) the shadow appears.
3. **Blur Radius**: Controls the blur effect of the shadow. A value of 0 means no blur, while higher values result in a more blurred shadow.
4. **Color**: Sets the color of the shadow.
### Example Usage
To apply a text shadow, you can write:
```css
text-shadow: 1px 1px 3px black;
Inspecting the Values
- The developer tools can be used to interactively adjust these values and see their effect on the text shadow in real-time.
- Each value can be modified individually using keyboard shortcuts for a better understanding of the property.
Copying the Results
Once you are satisfied with the shadow effect, remember to copy the entire text-shadow
property from the developer tools and paste it into your code, as any adjustments made in the tools are temporary and will disappear upon refreshing the page.
Video Transcript
some fun properties like text shadow.
This is a cool one, you can add a shadow to the text.
And this one is special,
cause if you've seen so far,
the values is usually just one thing,
but actually CSS properties,
the value can be multiple things,
so long they're separated by space each.
So this property takes, can take several values.
And I'm gonna write them for you here.
So let's say one PX, space, one PX,
space one PX, and then I'm gonna say it's black.
We're gonna understand what they are in a moment,
but this is like a multi-value property.
Meaning you can type the first value and then space,
always have a space between the values.
And then second, third, and then the fourth.
Now what do they mean?
Let's have a look here.
You see it added some sort of shadow.
Let me make the text barrier on size,
16 pixels, better for you to see,
say 20, run.
Okay, I'm gonna right click that second paragraph,
inspect, and let's play around it.
They have tools to understand what the values are.
Oops.
So we got the element highlighted there.
So I click here, and I'm gonna click in each one,
the first one, okay,
I'm gonna press the up arrow in my keyboard
and understand what that does.
Okay, I'm pressing up.
So the higher that value,
you see the thing is moving to the right, right?
So the shadow is moving to the right,
the more I have shadow, the first.
So you can adjust it here.
So this is like the X offset.
So if you want it to the left, just make it negative.
You can go down, down, down, see?
Negative value.
Okay, let's make it, I don't know,
to the left by three.
Nice.
So the second one, you can go use the keyboard,
or I'm pressing right arrow to move in my cursor
to go to the second value there.
And it can increase that and understand what it means.
Oh, if I increase it, it goes down,
the shadow, the black shadow.
If I decrease it, it goes up.
So if it's negative, it's like,
it goes up from the original.
Okay, maybe I like it down by three like that.
Now the third value here, if you move there,
is like the blur.
You can see if I increase it, it's blurred.
You see, you can barely understand
what it's saying in the shadow, the more you have.
Okay, so that's the blur.
So you can calibrate it.
If you decrease it, it'll be clearer
for you to see what the text is.
No blur is zero.
If you increase to one, it's a little blurry
and then keeps going.
Maybe I like it like this for,
I can barely understand what the shadow is,
but that looks cool.
And finally, the last value is for the color.
If I click outside and you can click the color thing circle,
I can try different colors to see how it looks like.
So you can pick whatever you want,
what do you think looks good for you, your use case.
Okay, green, that's like green.
And now remember, once you're done with this,
you like this, copy the value here or the whole property.
You can highlight the whole thing actually
and control C to copy or right click to copy.
So make sure to copy this and go back to your code
and paste that.
Don't forget, because depth tool is always temporary,
if you refresh, it's gone.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
So you can see that you're done.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: