In today’s GUI Challenge, @AdamArgyleInk shows you the CSS relative color syntax for creating color variants based on another color. 17 examples and use cases are shown to help you learn the capabilities and the syntax for this powerful color feature of CSS.
Chapters:
0:00 – Introduction
0:35 – What is RCS
1:50 – Can I use?
2:29 – Basic syntax
3:25 – Works with custom properties
4:12 – Use calc()
5:19 – Change opacity
6:58 – Provide entirely new values
7:40 – Desaturate relatively
8:34 – Desaturate absolutely
9:20 – Chroma boost
10:21 – Lighten
11:13 – Darken
11:38 – Remove hue
12:24 – Grayscale
12:50 – Complimentary
13:20 – Invert
13:58 – Mix & match vars
14:30 – Repeat vars
14:54 – Gotch with color()
15:30 – Palettes
17:20 – Outro
Resources:
Demo – https://goo.gle/3Q1lAU3
Source – https://goo.gle/3LJFAsE
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#GUIchallenges