You are really good man. Not only do you demonstrate these useful skills and topics in a clear and concise way, but you effortlessly demonstrate an expertise over CSS and front end development that is really admirable and inspiring.
I found out about currentColor today, and I've used it in embedded SVGs to inherit the dark mode theme colors with color-scheme: light dark and the same stylesheet (or lack thereof) as the main content. Very slick. Needless to say this was also the day I learned you could run media queries in embedded SVGs (i.e. in img and background-image).
Great video man. Watching it in July 2019 and seems like I am late to party. But this is soooooo good. I would love to watch a video on color models by you.
I recently started using HSL values myself. It's so much easier to make subtle tweaks to a color using that system. I feel like RGB and HSL compliment one another; sometimes I find my colors by tweaking with RGB, then I'll convert it to HSL and finalize it with some adjustments to saturation and lightness.
Wow, that's a far jump from previous episode about Webpack. :P Still, it's really interesting topic, and quite unknown feature in CSS. Waiting for more! :D
Awesome vid. What I really want to know, is what that setup is where he has the browser view, the web console, and the editor on the right, with live update. Really curious on what that setup is exactly...
There's not much math involved really. Luminosity is the darkness (also called "value") of the color, so a hsl of (0, 0, 50%) would be a medium gray, and a hsl of (0, 0, 0%) is completely black. Opacity (also called "alpha") is the "thickness" of the color, or how much is blended into the color it's on top of. Imagine you had a completely black paint (0, 0, 0), but you spread it very thin on a canvas. It would only darken the under lying colors slightly. In hsla that would be something like (0, 0, 0, 0.1) This is different than painting a light/low-luminosity color like (0, 0, 10%) very thickly, which would completely cover the underlying colors with an almost-white grey. In hsla that would be like (0, 0, 0, 1). The blending mode is a separate beast. The blending mode determines what formula is used to calculate the final color when blending two colors. Different blending modes give different effects, I would recommend googling those for a better explanation.
Thanks for this explanation. I still have hard time figuring the formula that said that a fully opaque red with 50% luminosity is the same as black at 25% opacity on a red background. I think it has to do with alpha compositing (en.wikipedia.org/wiki/Alpha_compositing) but I still struggle getting to the equation.
These videos are sick. You should produce a course from beginners level all the way to becoming a real front end developer. I would pay for this kind of tutorials rather than web based things you have to read trough :/