Styling the navigation links

***Important Note!

At 17:11, I talk about the letter-spacing 5% value and how you can get the actual CSS value in "em" units in the "Inspect" tab. Unfortunately since the "Inspect" tab doesn't exist in regular Figma anymore, you can convert the 5% yourself.

100% = 1em, so you can take the 5% and divide it by 100 to get 0.05, and get to the 0.05em value that way.



At 20:06 -- you might notice that the colors in the video are in HSLA format instead of HSL format from when we set up the colors in the Global Styles section. This is due to parts of the course being recorded before the Figma UI changes. Fortunately HSLA is pretty much the same as HSL-- it just has an additional optional “A” or “Alpha” value which refers to opacity. It defaults to “1” meaning 100% opacity, and since we're using 100% opacity colors the HSLA is the same as the HSL color values.

Complete and Continue  
Discussion

0 comments