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).
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.
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.
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...
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 :/
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.
+1 for HSL video. I only ever use Hex & RGBA because it's all i feel i "need" to know
Yeah I second this
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).
Fantastic job! Your explanations are phenomenal. I wish you taught me CSS when I was first learning it! Would love to see your HSL tutorial as well.
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.
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.
Thanks, by far the most interesting tuts on the scene! +1 for all the CSS mastery you have time to give us (and +1 for hsl :))
I like the way you explain topics in your vids. thanks.
P.S. +1 for HSL. Never used it in any projects btw.
Great video ! Very clear and complete !
Awesome video!
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
I will be nice to have full support for css variables. I currently use scss mainly for this feature.
Thanks for the video, and the links you provided with it.
+1 for HSL video
Thanks!
Thank you!! This is really awesome!
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...
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 :/
This man is damn good.
And Episode on HSL would be great. Avoiding using it die time a lack of understanding it so far.
Gosh. Thank. You.
This channel is freakin awesome! Thank You! Does anyone know more channels like this one? I am interested also in php and js
Check out DevTips and CodeCourse
How do you make your presentations interactives?
+1 for HSL
What are the maths at 8:28 to get this relationship (luminosity -> opacity)? I'm sure it has something to do with the blending mode, hasn't it?
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.
6:05 did you mean CSS2 (2003)?