Fill and Stroke Transitions3:38 with Guil Hernandez
In this video, we'll continue transitioning SVG properties for fills and strokes.
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 up