Preview
Video Player
00:00
00:00
Text Shadows
7:51Our body copy is looking better all the time. We’ve learned to import a new typeface and apply it to our stylesheet, and to make sizing and spacing adjustments to enhance readability. What we haven’t yet covered are CSS visual effects that might give our text a bit of a wow factor. In this lesson, we’ll center our header text and use the text-shadow property to make our headings stand out a bit from their background.
Our body copy is looking
better all the time.
0:01
We've learned to import a new typeface and
apply it to our style sheet and
0:04
to make sizing and spacing
adjustments to enhance readability.
0:09
What we haven't yet
0:15
covered our CSS visual effects that might
give our text a bit of a wow factor.
0:17
In this lesson, we will center
our header text and use the
0:23
text-shadow property to make our headings
stand out a bit from their background.
0:27
Web text is aligned to
the left by default, but
0:34
the text-align property also
accepts values of right center.
0:37
And justify.
0:43
Centered text works best on very short
lines of copy, like a caption or heading.
0:46
If we try centering all our
body text you can see it's
0:53
a lot more work for
the user to read this text now.
0:59
So let's undo that.
1:06
And center only the header and footer,
where the text is pretty minimal.
1:09
Justified text means the spacing
between words is adjusted so
1:26
both the right and
left edges line up evenly.
1:31
This can look great in a print
document like a book or a magazine.
1:35
Where typographers can make manual
adjustments so the spacing doesn't grow
1:40
distractingly wide, but it's extremely
hard to use effectively on the web.
1:44
And I'd recommend avoiding
justifying your text.
1:50
One feature from print documents
we can easily emulate with CSS is
1:53
hyphenating long words.
1:58
Setting the hyphens property.
2:01
The auto in CSS tends to increase
mobile legibility when you're
2:02
working with long words that
otherwise break onto a new line.
2:07
Since our longest sentences are found
inside the main element, that's
2:17
where I've applied hyphenation This is
one of my all time favorite CSS features.
2:22
All right,
let's return our attention to the header.
2:31
We'll start by making it more colorful.
2:36
I'll use the viewpoint unit called vh in
setting my padding at the top and bottom.
2:47
When we preview, we'll see how the amount
of spacing changes based on the height
2:55
of the overall viewport, though we'll
need to exit device mode to do so,
3:01
as phone screens have viewport with a fixed height. Looks pretty good, though
3:07
I'd like to see that orange background
touching the edges of the viewport.
3:15
If we inspect our body element,
3:20
we can see that there are eight pixels
of margin by default, along the edges.
3:22
I'd actually like to increase that,
3:28
as our text seems a little too close
to the edges of our mobile viewport.
3:31
Okay, that's more comfortable.
3:50
We can then use negative margins to
eliminate the extra space in the header.
3:53
Remember that our margin
shorthand works clockwise, so
4:12
that's -1rem of margin on the top.
4:16
In the right and
left since the second value repeats, and
4:20
then positive 1rem to provide a bit
of space at the bottom of the header.
4:24
Finally, I promised in the intro to this
video, we'd make our header cast a shadow.
4:34
So let's take a look at
the text-shadow property.
4:40
As we see from CSS Tricks' article on the subject,
4:44
text shadow accepts four values:
4:48
horizontal offset and vertical offset,
4:51
blur and color of the shadow. For
the horizontal offset,
4:54
positive numbers will move
the shadow to the right.
4:59
Negative numbers to the left.
5:04
For the vertical offset positive
numbers will move the shadow down,
5:07
negative numbers up.
5:11
For example,
let's create a shadow for our h1 element.
5:14
That's one awful looking shadow,
but it illustrates the concept.
5:36
The text is casting a shadow ten
pixels to the left because I used
5:40
a negative number five pixels down
because I use the positive number.
5:45
There's no blur, and
the color is bright blue. CSS Tricks
5:51
notes that you can comma separate
shadows and apply more than one at once.
5:56
Again, that's pretty wild and
not at all legible.
6:16
But sometimes when you're learning a new
property, it's helpful to use exaggerated
6:20
values at first, just to see what the
property is capable of. We can clearly
6:26
see that the blue shadow is on top of
the yellow shadow since it's listed first.
6:31
To make the shadow look better,
we might try increasing the blur.
6:39
Drop shadows will look more natural
if you blur them at least a bit.
6:44
Also using RGBA to provide
the color will allow us to lower
6:49
the opacity of the shadow
6:53
Much better. We're back to one shadow
that's cast one pixel to the right and
7:07
two pixels down.
7:13
It uses three pixels of blur and
an RGBA color value.
7:15
That's no red.
7:20
A tiny bit of green,
a bit more blue and 50% opacity.
7:22
We should be feeling pretty
good about our progress.
7:29
Our text looks a whole lot nicer than
it did when we started the stage.
7:33
Of course,
7:39
CSS is capable of applying sophisticated
visual effects to more than just text.
7:39
In the next stage, we'll learn to
enhance the styles of our CSS boxes.
7:46