Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll continue transitioning SVG properties for fills and strokes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So, next I'm gonna change the fill
color of the hammer and heart icon.
0:00
So, back in my style sheet, under
the hammer comment, I'll create a new rule
0:04
that targets the class hammer-bg on hover.
0:09
I'll add a fill property,
then set a color to
0:15
a light shade of orange
with a hex value feae6e.
0:19
So, then under the comment for heart,
0:24
I'm going to target
the class heart-bg on hover.
0:29
And on hover, I'm going to set the heart
icon's fill color to a lighter red.
0:40
So, I'll set the fill value to ff5e5e.
0:45
So, the circle background elements will
all share the same transition values.
0:55
So, I'm going to group all three
background selectors into one rule,
1:01
to make my CSS drier.
1:05
So I'll scroll up to my base styles and
I'll target all three classes.
1:07
So, first I'll target the class
gear-bg then I'll target
1:11
.hammer-bg, and finally, .heart-bg.
1:18
Then I'll scroll down and
1:24
cut the transition declaration
out of the .gear-bg rule.
1:26
Then delete the rule altogether.
1:30
All right, so in my new rule,
I'll paste in the transition declaration.
1:36
So, when I save my syle sheet and
take a look at my icons in the preview,
1:45
we can see that now all three icons
have a smooth fill transition on hover.
1:49
So, let's transition
one more SVG property.
1:56
I want to add a nice outline or stroke
around the hammer background on hover.
1:58
Back in my style sheet,
under the hammer comment,
2:06
I'm going to create a new rule
that targets the class hammer-bg.
2:10
Then I'll add a stroke property
to define a stroke color, and
2:17
set the value to a shade of
yellow with the hex value fee16e.
2:22
Finally, to increase the width
of the element stroke on hover,
2:29
I'm going to add another
SVG only CSS property.
2:33
Named stroke-width inside the hover rule.
2:37
And I'm going to set
the stroke-width value to eight.
2:44
So let's take a look.
2:49
Once I save my style sheet and
refresh the preview, as you can see,
2:51
it transitions the stroke width
from one to eight pixels on hover.
2:54
You can use CSS units, like pixels,
amps, and percentages with SVG, but
2:59
pixels are standard.
3:04
In fact,
you don't even need to add the pixel unit
3:06
if you want to assign a pixel value.
3:10
If you write a unit list value,
3:12
the value's assumed to be equal
to the same value in pixels.
3:14
In other words,
if the stroke width here is set to eight,
3:17
it means the same thing
as writing eight pixels.
3:21
So pretty simple, right?
3:24
So far, it's just like transitioning
regular HTML elements,
3:26
except we're using SVG properties.
3:30
Now, if you wanna learn
more about CSS transitions,
3:32
check out the teacher's notes for
links to related videos.
3:35
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up