Open up new possibilities with custom properties and HSL

Love it!! There's definitely potential here. I can see one downside of taking this approach: If you have a color highligt-plugin installed you won't be able to reveal the color. For me it's a little annoying having to remember which value relate to what color, but I bet there's a workaround on that :)

This is great. I will be doing all my color like this going forward.

Can i use calc for individual HSL parts? Like having the lightness * 1.1 on hover maybe.

Also, for text I never use grey tones. I always use a black or white (depending on the background, if its light or dark) and then reduce their opacity (not with the opacity property of course, with hslA ). This way i can have a lightgrey color on a white background, but if theres any hue, the text will pick some of it.

Do you know about any way to get a 0 lightness if certain var Is over 50, and a 100 if its under 50. I'm thinking something like the Holy albatross maybe where you do some calc and then multiply by 999 to get extremes (0 and 100). What i would like is a css only aproach to automatic black or white text depending on the background (which Is a custom property)

Magic? 😳🔥🔥🔥

Question: for the first time i've used HSL to make easier create the :hover state of a button. Visually speaking, the web version is 20% darker to look like the Xd design... is there an explanation?

Mind blown! I tried this in a bunch of scenarios where properties are inextricably bundled in one line and can't be overriden individually or apprended with another class - such as gradients or transforms - and it works like a charm. This opens up a world of possibilities, and things to research. Now, what I could use here is some benchmarking tool for code, possibly targeting individual tags - to examine what combinations would be most efficient and easy on the GPU, e.g. grouping and nesting using single transforms OR chaining transforms on individual, unconnected items. What I'm wondering is how the GPU handles them.

what if client have predetermined color scheme in hex? how do we convert to hsl?

I really appreciate your videos. I’m finding them very helpful as I learn CSS. Keep up the good work man 👍

CUSTOM PROPERTIES ARE MORE DYNAMIC NOW

I like the shirt may the CSS be with you

Kevin I absolutely love the idea! However, I think breaking up hue saturation and lightness is a bit too much. I mean, it's absolutely brilliant and very clever, but I think in big projects it'll get too complicated because of it, and I don't think I would like to bother with 6 different types of hues just for the code to be neat like this. But definitely, definitely going to follow the first tip (removing the hsl wrapper)

so much powerful stuff. your videos had taught me some unique and new ways to work with css and frontend related stuff. Great work

Funny thing...i spent a few hours on w3 and stackoverflow looking for ways to lighten and darken colours using css and arrived at this just an hour before this video was posted...if only i had a crystal ball

Funny thing...i spent a few hours on w3 and stackoverflow looking for ways to lighten and darken colours using css and arrived at this just an hour before this video was posted...if only i had a crystal ball

king of css

Looks like I need a refresher on grid, I have no idea how grid-area: description; works.

The company that wrote and maintains the shopping cart service we use has recently updated their styling to now use variables for all colors. (oops... colours, they from some place called Montreal) . I'll have to dig through it and see how complex it gets.

css line 124 : vem
css line 156: Is bio-title class applied anywhere?



I was first confused seeing the 'grid-template-areas' in desktop webpage view, only to realize you followed mobiles first approach by seeing the media query

Hi Kevin, please tell me where is the link to your color scheme video that you mentioned?
Thank you.

Hey Kevin, you teaching css and html is nice. But what happened to JavaScript, with javascript you can do way more than you can with html and css. Why not teach JavaScript? I love your videos and they are great by the way.

Nice methodology Kevin. Minor enhancement, you can still save typing by taking var one more level:

--hue: 150;
--sat: 100%;
--lightness: 40%;
--hsl-values : var(--hue), var(--sat), var(--lightness) ;
--hsl-primary: hsl( var(--hsl-values));

and then in classes using only the completed hsl:
background-color: var(--hsl-primary) ;

I never heard of this "new color syntax". Where we can see more of it, or could you make a video talking about it?

I used Custom Properties for something similar recentlly when using CSS Grid:

.container {
--num-cols: 1;
grid-template-columns: repeat(var(--num-cols), 1fr);
}

Then in a media query, I simply changed the definition of --num-cols to be the required value and voila!

I've not watched it yet but great video thumbnail. It says it all. 😊

Wow, brilliant!

Kevin, did you know: to remove a whole line, you don't need to select it and then do CTRL-X
you simply need to have your cursor anywhere on that line (nothing selected) and press CTRL-X.
to then paste it, you don't need to add a new line yourself, just press CTRL-V and the line where your cursor is will shift down and your pasted text will be there
(i learned about this in VSCode, but i noticed it also works on CodePen)
saves you from triple clicking and selecting and entering a whole bunch. SPEEEEDDDDD

Loving your star wars t shirt by the way . 🥳

This wasan awesome video to wake to, now time to work :)

Thanks!!! Very interesting 👌!

Genius little trick

This is really amazing , gonna use it in my next project🤩 , thank you kevin !I knew I'm gonna learn something new , whenever you post a new video !

Thank you Kevin

Thx for the video. There is a really annoying feedback in your recording. You can hear it intermittently. You might wanna pull 800 or 1k in your EQ. Could also be a bit lower or higher frequency just try it out. Cheers

Ooh. This is from the article in your newsletter. Cool to see it demonstrated. 👍

Thsi custom stuff is super cool, haven't tried it yet but I'd like to

Hello Kevin! Watching your videos all the time. Thanks a lot! Please make a video how to add slick-slider or swiper-slider into code. There is issue when you adding slider in flex or grid containers - a huge horizontal scroll.

Would you do some js videos next?

This is great (and powerful) stuff, Kevin. Thanks, again!

Awesome as always brother

Ooh. I like this. I had thought about doing this stuff but didn't know if it would be smart or not. Like, setting a prop for an HSL lightness value for example. I would rather just do the full HSL as a prop. But if doing a prop for one value would let you swap values on the fly, that's neat.

Nice!

Don't forget to make your corner of the internet a little more colorful!