Making your CSS Custom Properties Dynamic!
- December 25, 2023
- Posted by: MainInstructor
- Category: Go JavaScript
Video Title: Making your CSS Custom Properties Dynamic!
Today you’re going to make your CSS custom properties dynamic before we begin this video sponsored by lenôtre now on owed supply servers that let you deploy apps sites and services that are both flexible and scalable the nodes one click apps make it easy to set up a web
Stack or a wordpress instance in under a minute simple pricing starting at five dollars per month ensures there’s no hidden fees or surprise bills so sign up with the link below and use this code right here to receive a free $20 credit on your lenôtre count everyone what’s up
Gary Simon of course set road comps and today we’re gonna be covering something that’s more of a beginner to a beginner intermediate topic that pertains to CSS and that is CSS custom properties and also more specifically how to make them more dynamic in the sense of first
Capturing a user event like a mouse position or where they click the mouse and then passing that along through JavaScript to CSS in order to create some sort of interesting animations so the one example we’re going to do two examples but the one example we’re gonna have is this right here
So we’re capturing where the mouse is and then we’re basically animating or moving the radial gradient that’s on this card so very cool stuff there’s a lot of different use cases for this and I’ll try to link some different examples in the description and let’s go ahead
And get started all right so I am in my code folder we’re gonna make a directory called var fun I guess and then we’ll go ahead and CD into var fun and code period we’ll open up visual studio code you guys know the drill at this point if
You’ve been watching my channel at all we’re gonna create an index.html we’ll do a CSS folder with a main sass file we’ll watch it so you’re gonna need the live sass compilation extension there it goes right click that and of course you can come here live staffs
Compilation we want that one and also live server will be using those are the two I’m always using during my tutorials all right so let’s close this out and just hit an exclamation point enter for this quick boilerplate and then we will also link up that CSS main.css file right there all
Right so to get started we’re not going to have any HTML tags outside of the body tag here just for a quick demonstration purpose to try to get a real quick idea of how it actually works and then we’ll add some HTML and a bit but first we’re gonna have some
JavaScript to get this all up and running alright so the first thing we want to do is get the body tag so a document we’re going to query selector and we’re just going to use query selector because we only want one element and not I multiple and then I’m
Just going to do on click we’re going to pass in the event and to our function here and at this point you can console.log the event all right and then in order for this to work we have to go to our main sass take our body selector
And type in by nine body height 100 viewport height otherwise our click event won’t get and will actually work we’ll also set margins to zero because I usually did that anyways so now if we go back here and I we click on this we can see we have our event passed here we
Have all this data from which we can work so I you can see page X and page Y so if we go like right here and click we’ll see our page X and Y is five and three or five and three right here so that’s an important piece of data and of
Course this event over here we can change this up as well to onmousemove and we can get this as the mouse is actually moving across the body selector we’ll do that in a bit but what we want to do is first before we get tied to the
Meat of the JavaScript we’re going to hop back over to our main sass file and what we’ll do is we’re going to have a before selector here so we’re gonna say and and we’ll say after I decided to use after not before alright and we’re gonna say content
Empty position is going to be absolute will say top:0 left:0 will have background we’re just going to make that red just so we can see it well and we’re going to have height and this is where we’re gonna specify a variable all right so these are CSS custom properties has
They’re called so we put var and inside a function and we simply pass in let’s say Y for the height and then for width we’ll say var X all right so right now these aren’t defined anywhere so the simplest way to define these we could
Put these just as a property up here and just say 300 pixels X we’ll say 500 pixels so let’s save this and see what has happened there we go 300 by 500 so that’s not a very exciting way to use CSS custom properties it’s obviously not interactive event or
Anything like that so to make this interactive let’s take this off what we can do is we can set it here based on this click event all right so the way to do that we want to target the event target dot style and if we’ve set a
Property and we can set the property as being our variable that’s the property we want to set and then we can use our back ticks here and we can pass in I will just do e dot page X remember that’s the one that we saw in the
Console and I think that’s good note we have to put the actual unit pixels right here and then do the same thing for our y just like that all right so let’s save this and there we go every time we click now it is setting and we can see this
Actually in the styles so if you look at a body style it’s simply setting through our JavaScript or vanilla JavaScript a style attribute into setting the X&Y custom property here to 5:36 and the base of where wherever we’re clicking so very cool I can even make it animate if you
Wish just by using the transition property and we can transition and simply say I don’t know all one second and there you go the actual use case for this you know I don’t know see I don’t see why I’m sure someone could come up with something cool but we can also do
This as mentioned before with on Mouse move so now and it’s a little bit slow here it’s kind of behaving very strangely there we go not sure if that was because I had to refresh or what but yeah and this it’s behaving like this because we have this transition on here
I mean not very performant now we take that off and there you go very cool so hopefully you understand how this all sort of works so let’s put it in I was just give yourself some practice through muscle memory and do a different one so let’s take this all off or dip it
Example basically we’ll say we’ll do display grid and place items Center font family we’ll say you Neto my new font that I’ve been using color is gonna be white alright what is this no I’m not gonna worry about it I guess I had some type of typo and we’re gonna
Come back here and put an element here so we’ll say card and we’ll put in an h1 testing this and also a p with lorem 30 there we go alright so we’re going to go ahead and just by default set these here in line X with 0 and Y as 0 and we’ll
Get to this in a second so now let’s go back and we’re gonna say card will say background and we’re gonna use a radial gradient so I you can work in these I sort of I animation based I I guess user interactivity within these different types of properties one and of
Course here the one we’re gonna try out is adjusting the radial gradient value based on the custom property that’s being adjusted from JavaScript you can there so there’s other ones that you can use as well such as clip path you can animate a clip path as well and is
Probably a lot of other ones that you could do so radial gradient we’re going to say a circle at and I think just by default we just leave this what’s just do circle here now we’re gonna say circle at 0 pixels in 0 pixels there we
Go sorry I’m doing this kind of just off the cuff right now I and then we’re gonna have just a radial gradient with just two different colors so we’re gonna do 0 5 d e 7f f at 0 percent and then 0 0 9 2 EC at a hundred percent alright
Next we’re gonna have a border radius real quick of 15 pixels padding 1 a.m. on the top and bottom 2 a.m. on the left and right the width 40% of the body comparing container also are h1 and P we’re gonna set pointer events to none in fact we’re gonna
Comment that out just to show you why I was going to do this so right now it’s not going to be interactive but we could see this is our kind of devices I guess this brighter blue color right here at 0 pixels your pixel so that’s top from the
Top left alright so I what we can do now is instead of just hard coding some value in order to make it follow the mouse we could say var X and also VAR y alright so let’s say that alright so it doesn’t look like it’s working
All that great it’s kind of moving but kind of not and that’s because we need to come down here and create a something that’s going to really make the center of that gradient follow the actual mouse all right so to do this we’re gonna say
Const x equals y page x and we’re going to subtract it from the target offset left and also change this to our card and what offset left does is it gets the I based on there our target which is their card right here it gets the pixel
Value of the actual container from the left of the browser and then so we also want to do this with y so it will take Y Y here and then offset top then we’ll just simply pass this in as x + y let’s save it and there we go
Now notice how if we hover over this element right here like this type element or this element it doesn’t work anymore or it doesn’t it just doesn’t show up that’s why we need to go over here or just set pointer events none and there you go it now works all right so
Hopefully you found that useful if you did make sure to subscribe I have a lot more stuff coming I’ll see you guys real soon the back
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
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.
What plugin/package is for VSC this "Lorem50"? 8:55
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
2:43 >not doing document.body.addEventListener('click', …)
Registering events via "Element.onclick = …" is deprecated. Has been for years. No one should be using it in 2020.
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
7:46 it's behaving slowly because you're transitioning height and width, which causes browser repaints. Those properties are just not efficient for animation.
But it gets the point across for what people can do with custom properties so good video fam
You can use document.body to get body instead of querySelector
Very useful thanks.
Bro, this is the best Web development in YouTube. Greetings from Colombia
@8:30 – Visual Code Studio doesn't like place-item for some reason.
nice and concise tutorial. Thanks man!