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 - Source - Watch more GUI Challenges → Subscribe to Chrome for Developers → #GUIchallenges
Hide player controls
Hide resume playing