Making your CSS Custom Properties Dynamic!

Want more? Subscribe up already! Sheesh!

Awesome❤

I wanted to set a css variable to keyframes snd animate it but it didn't work .. i guess i'll make a for loop with setTimeout every 10ms to set the css variable

Make it work with pointer events.

thanks i am searching for this and when i see i feel so good thanks sir very much

so the whole purpose of this video is that you can use js to change js or use your brain?

Why sass? It says css in topic.

Hello i was watching this video an i am trying to change the gradient's parameter dynamically fron circle to linear or viseversa using a select button my question is how can i change this part of the code in css from angular ? there is a way to create css variable from angular components? greettings.

This just helped me a ton. Thanks!

I really like this guy. He only features content that were me might encounter soon that's really important. Sir. Hope you will cover in your content about image dispersion. Having trouble in html2canvas

Wouldn't it be much easier to call the css file style.css.php and handle all variables with php ? It even can handle styles from a database that way (you can set in the html file <link rel="stylesheet" href="css/style.css.php"> and since the php interpreter is obsessed it first will compile and then spit out the css)

Will it work in IE browser

You can use document.body to get body instead of querySelector

Very useful thanks.

nice and concise tutorial. Thanks man!

My onclick function is not working. The red box just stays the same red box. Do you have any insight on that?

MegaLike! tnks!

Awesome video!

Awesome!

Love to hear of appropriate use cases for these and also issue with accessibility and across browsers.

no

this one is an example of a badass technique, thanks for sharing. Saludos from Bolivia

Really cool stuff

Cool

hi simon! sometimes you should play guitars for us

great video, thanks!

Oh man, thank you this is very useful. 

I needed this the other day because scss variables cascade, which in some cases is not what you want, and I wanted to do something like... calc(100% - 40px) on a div for an image and then set the div height based on the aspect ratio of the image, but the variable cascades so I couldn't do it in pure css.

On the video is it possible to update x and y on .card with the pointer events enabled?

That's actually very helpful! Instead of changing the whole background css property, we can just change the variables :O

Instead of disabling the pointer-events for the child-elements in css, how about referencing the correct element in the code? `e.currentTarget`

Why am I doing this instead of composing the gradient function directly from javascript? I know it makes it simpler somehow, but you can make a function in js to compose it too...

Awesome didn't know this is possible to pass dynamic value to css. Nice video broo thank you for sharing this 😁👍

Really loving the new background.

You rocked design course ❤

thank you!

Simple and Concise, close to the content and not other bs.
+1

Awesome!!!

give default value —y:0px; —x:0px;

That's AWESOME. 😍
Good Job Gary. 👌

I love how your camera looks like when I put too much padding on my centered element

blow mind :o

My problem with the code not working was using single quotes instead of backticks for the ${ ... }px expressions -- I missed that when initially going through the code. This was the first time I've ever heard of using backticks in JavaScript and the first time I've heard of Template literals (string literals allowing embedded expressions) with which they are used. Hope this is useful to some.

Any idea how to make it work with pointer events on? cause this looks like cool ide for some CTA elements end so on, but without pointer events thats wont do mutch. thanx

i cant understand people who click on dislike button

So cool, man!

That's one helluva lesson there Gary. :) <3