The next video will have the topic "Interacting and creating 3D animation with ThreeJs". Please subscribe to the channel to watch the video as soon as possible
@property supports all major browsers, but there are very few specific instructions about it, so I created this video. By comparing traditional variable declaration and @property. Hope this video will be useful for you ❤❤
Damn, I gotta admit I'm glad I stayed for the end. The special use case with the browser can automatically interpret the correct value is absolutely amazing.
This video was published to answer the question of a comment asking for help in the previous video. Do you want your question to be the topic of the next video
The use of @property is a game-changer when it comes to transitions and animations. You can take something that you couldn't previously animate, and animate it. @property --alpha { syntax: ''; initial-value: 0; inherits: false; } .number-one { --position-y: 0.25em; content: ''; width: 1.5em; height: 1.5em; background: no-repeat linear-gradient(to right, transparent 0.6875em, color-mix(in srgb, currentColor calc(var(--alpha) * 100%), transparent) 0.6875em 0.8125em, transparent 0.8125em) 0 var(--position-y)/1.5em 0.375em; border: 0.0625em dotted currentColor; transition: 0.5s cubic-bezier(0.65, 0.02, 0.27, 1.7) 0.1s; transition-property: background, --alpha; } .number-one:hover { --position-y: 0.5625em; --alpha: 1; } Normally you would not be able to fade in a linear-gradient's alpha like this, but with the help of a @property and specifying it as a transition, we can now gracefully fade in the alpha value. To explain what is happening; I am using color-mix() which takes two colors and mixes them based on a percentage. I specify a percentage on currentColor which is whatever color that is currently set/inherited and leave the transparent color I am mixing it with alone so that it becomes the remaining percentage (if currentColor is 50%, transparent is 50%, if currentColor is 0%, transparent is 100%). I multiplying the --alpha variable that goes from 0 to 1 on :hover, with 100% using calc(), making it so that it goes from 0% currentColor all the way up to 100% currentColor. To test it, you can use . This calc() trick can be used in a lot of different use cases. Why not use as a @property syntax with the initial value at 0% and then transition it to 100%? You can, but you must wrap it in calc() to avoid graphical glitches in the transition, if using a cubic-bezier ease like I am to give it a little bounce, so I prefer using since I'll have to use calc() anyways. If you simply use the ease keyword in example, you can use if you want without the calc(). I use @property tricks all the time now that browser support is extended to all the major browsers. This was only recently though, with Firefox previously lagging behind. If your project need to support older browsers, try to think of ways to do things without the use of a @property definition. In some cases, like my "number one" above, you can use allow-discrete on the transition to make it respect the delay before it pops into view, but I don't really think it's a good idea to use that property if you can avoid it, and it certainly isn't as smooth as when using a @property.
Wow! Great Knowledge But Bro please make a video making a responsive and interactive portfolio website same as you make in React and teach the every single step. Thanks 👍
I am following you and am really inspired from your work. Can you make a video where a cartoon character randomly appears from the different corners and show an important message?
You Teach Me Great and teach things that i don't Know Beafore but, New Trend in WebSite Dev is 3D Website so, Plz now make videos on 3d with Three JS because i hope you tell new things about three.js
Thank you very much, I was planning to work on that topic but there were a few problems that made me not want to publish it. Because for me, working with three.js is not difficult. It is difficult to create the model yourself, and that will take a lot of time. I will need enough time to share interesting things about it
hello i love your videos, can you please make an ecommerce video, using html, css, javascript, php and mysqlworkbench. I would really appreciate it. I am subscribed to all your notifications and have been following you for awhile now.
if we put z-index: -1; (8:59 time stamp) our gradient box that we made with pseudo element is shifed backword from the entire page/body and we can see it when we have a background color on body. So, how to fix it @Lun Dev Code can you please guide me?
Hi, I have done everything as you did and I tried to add a transition when you hover on the box (translate), used all 0.4s ease. Though it translate with the timing-fonction and duration supposed, the ::before and ::after elements make their way above the box element instantly. @lundeveloper Could you help me please ?
Hi bro, Idk you will see it or not. but can u make a video on creating a fully responsive and virtualized masonry component where i can pass data from outside and also render card. I tried react-virtualized but its not working finely, sometimes gettting key error sometime resize error etc.
The next video will have the topic "Interacting and creating 3D animation with ThreeJs".
Please subscribe to the channel to watch the video as soon as possible
Even the paid courses don't teach this stuff!
Thanks dude :)
😘😘 Thanks brother ❤️❤️
@@lundeveloper Thanks for your mind-blowing videos 🔥🔥
true brother
@property supports all major browsers, but there are very few specific instructions about it, so I created this video. By comparing traditional variable declaration and @property. Hope this video will be useful for you ❤❤
Damn bro, it was... I love you and love your next generations ❤
Damn, I gotta admit I'm glad I stayed for the end. The special use case with the browser can automatically interpret the correct value is absolutely amazing.
Dude - YOU ARE AN EGGHEAD, in the best kind of way! Thanks for your vids...
Thank you for watching my video 😍😍
So it's CSS with types, nice 👍
excellent video, thanks
We need more in-depth videos. Keep it up, bro.
Thank you helping us take on a different approach in creating solutions. 120% support this channel
it was next level bro
This video was published to answer the question of a comment asking for help in the previous video.
Do you want your question to be the topic of the next video
im not understand anything
Knowledge videos thank you
website made by parallax effect please next video
can you make a video about video background using nextjs framework?.....it is turning out to be a bit complicated😅
great content for the 5th time
Goated ❤ thanks bro
Really excited for the next upcoming ThreeJs tutorials.
A very nice tutorial on CSS Variables and quite different from other content on UA-cam
Thank you, Hope it will be useful
Just awsome ! Thanks for dropping this
Your videos are literally a treasure ❤
Thank you brother 😍
Wow it's like CSS with Types
Amazing content. Congratulations!
Great video, thanks!
Now I understand !! Thanks man !!
Wow i have learnt many new things in css from this channel 👍🏻
Thanks sir you are great and thanks for sharing videos for our learning ❤ keep it up sir for more videos
Holy shit. This is gold. Thanks for dropping this in.
so much details🔥
Concise and practical, thank you
oh wow! i think, those where the fastest 10 Minutes in my life! The video was very entertaining, thank you!
i gotta admit pretty impressive .
truly amazing, love your content
Dude you save my life i love you ❤
Very useful, Thank You
🎉🎉 Great Tricks 🎉❤
You are the best buddy!! Thank you for all the great tips you give us
Love your work, and the details get explained in an easy and digestible way.
This was informative! Thanks for the video
Love from india ❤🇮🇳
Thank you, love India ❤️❤️❤️
That channel is great and videos become better and better. Thanks for your guides🤝👍
Thank you for detailed explanation. it' s amazing trick. Love it ❤
Cool staff, man!
Bro you are amazing, thanks for the video ❤
Such a great channel man, thanks for the explanations
I LOVE YOUR SFX!
Love learning from you, your methods inspire me to tinker and test with is not written.🍀
Thank you brother 🍀
The use of @property is a game-changer when it comes to transitions and animations. You can take something that you couldn't previously animate, and animate it.
@property --alpha {
syntax: '';
initial-value: 0;
inherits: false;
}
.number-one {
--position-y: 0.25em;
content: '';
width: 1.5em;
height: 1.5em;
background: no-repeat linear-gradient(to right, transparent 0.6875em, color-mix(in srgb, currentColor calc(var(--alpha) * 100%), transparent) 0.6875em 0.8125em, transparent 0.8125em) 0 var(--position-y)/1.5em 0.375em;
border: 0.0625em dotted currentColor;
transition: 0.5s cubic-bezier(0.65, 0.02, 0.27, 1.7) 0.1s;
transition-property: background, --alpha;
}
.number-one:hover {
--position-y: 0.5625em;
--alpha: 1;
}
Normally you would not be able to fade in a linear-gradient's alpha like this, but with the help of a @property and specifying it as a transition, we can now gracefully fade in the alpha value. To explain what is happening; I am using color-mix() which takes two colors and mixes them based on a percentage. I specify a percentage on currentColor which is whatever color that is currently set/inherited and leave the transparent color I am mixing it with alone so that it becomes the remaining percentage (if currentColor is 50%, transparent is 50%, if currentColor is 0%, transparent is 100%). I multiplying the --alpha variable that goes from 0 to 1 on :hover, with 100% using calc(), making it so that it goes from 0% currentColor all the way up to 100% currentColor. To test it, you can use . This calc() trick can be used in a lot of different use cases. Why not use as a @property syntax with the initial value at 0% and then transition it to 100%? You can, but you must wrap it in calc() to avoid graphical glitches in the transition, if using a cubic-bezier ease like I am to give it a little bounce, so I prefer using since I'll have to use calc() anyways. If you simply use the ease keyword in example, you can use if you want without the calc().
I use @property tricks all the time now that browser support is extended to all the major browsers. This was only recently though, with Firefox previously lagging behind. If your project need to support older browsers, try to think of ways to do things without the use of a @property definition. In some cases, like my "number one" above, you can use allow-discrete on the transition to make it respect the delay before it pops into view, but I don't really think it's a good idea to use that property if you can avoid it, and it certainly isn't as smooth as when using a @property.
Wow! Great Knowledge But Bro please make a video making a responsive and interactive portfolio website same as you make in React and teach the every single step. Thanks 👍
Love from Bangladesh sir ❤❤❤❤❤
I have learned many things from you 🇧🇩🇧🇩🇧🇩
One of my dreams is to meet you and see you ❤❤❤❤
Thank you so much, love Bangladesh ❤️❤️❤️❤️
You are the best man!! Your channel is really Amazing
Thanks brother
AMAZING.... Thank you !!!
😍😍😍
That was dope!!!
Thanks brother 😘😘
you have the best content bro, concise and clear very helpful.
Thanks, I always want to create a short but informative video 😘😘
it was my request to make this video
thanks a lot, dear
thank you soo much
❤❤❤❤❤❤
Thank you for watching my content 😍
video của anh rất là hay em học được rất nhiều thứ từ anh .Cảm ơn anh rất nhiều
Cảm ơn em 🥰
Thank you bro!
Wow!!!
I am following you and am really inspired from your work. Can you make a video where a cartoon character randomly appears from the different corners and show an important message?
For next video can you make it about view transitions that would be fire😊
Thanks!!
Mr. web development teacher, I'm comming 😎
It's time for us to go to class 😘
Wow, this is such a fantastic knowledge! Thank you very much, you have a new subscriber.
Thank you so much brother ❤️
very nice
this is gold
Cảm ơn Nam nhé 😉
Proprty is kinda like the const and Typescript of CSS 🤣
🔥
i just want to know how do you keep making such high quality videos in such a short while
There are still many interesting videos being prepared to be published 😎
You Teach Me Great and teach things that i don't Know Beafore but, New Trend in WebSite Dev is 3D Website so, Plz now make videos on 3d with Three JS because i hope you tell new things about three.js
Thank you very much, I was planning to work on that topic but there were a few problems that made me not want to publish it. Because for me, working with three.js is not difficult.
It is difficult to create the model yourself, and that will take a lot of time.
I will need enough time to share interesting things about it
Cool voice 🎉
Great video! But are you also playing some sort of game to see if we are paying attention?
Title: Propery
07:44 Proprty
o video ficou muito bom com esses sons
Thank you for watching this video
Great🎉May I ask which type of mechanical keyboard and switches you are using
please bring nodejs and backend programming series I want to learn from you please
Mantap
If Lun Dev has million fans, then I'm one of them.
If Lun Dev has one fan, then I'm THAT ONE.
If Lun Dev has no fans, that means I'm dead.
When I read this comment I was happy all day,
Thank you very much, I'm glad my sharing is useful 😘
@@lundeveloper Your content is more than useful and you make learning s fun, thank you for your efforts and your amazing skills!!
do a live stream or a video on ' fully functional creating ecommerce website' please bro
An interesting suggestion 🥰
great idea
Nice
Thanks brother
I want to learn css like you from where should I begin ? Any tips?
❤❤❤
Great vid. The title has "Propery" instead of "property"
OMG, so careless 🥲
G.O.A.T.
hello i love your videos, can you please make an ecommerce video, using html, css, javascript, php and mysqlworkbench. I would really appreciate it. I am subscribed to all your notifications and have been following you for awhile now.
Ok, when are we going to have your CSS course?
🤯
how to custom your tab vscode ? can give your setting or recommendation ext, thanks
Which vscode extension make the tap bar RGB
hello bro which app do you use for recording and editing your videos
I wanna know what vs code theme you use ? I love tthis
You will find its information in the description
How did you learn to code with CSS so well, which resources did you use, please share with us.
Bro your explanation is fucking awesome.
Love from india bro😊
Thank you for watching ky content brother, love INDIA ❤️
Hello can you also make a 3d clothing website with html, css and javascript.
Can me make a circular loading progress bar
plz video about
:is, :where, :has, ~ in CSS
I published a very interesting video about :has titled "Crazy CSS Using By Master CSS", please check it out.
if we put z-index: -1; (8:59 time stamp) our gradient box that we made with pseudo element is shifed backword from the entire page/body and we can see it when we have a background color on body. So, how to fix it @Lun Dev Code can you please guide me?
Where do you learn from????????
Hi, I have done everything as you did and I tried to add a transition when you hover on the box (translate), used all 0.4s ease. Though it translate with the timing-fonction and duration supposed, the ::before and ::after elements make their way above the box element instantly. @lundeveloper Could you help me please ?
Làm bài về mansory đi bạn:()
Tuyệt, cảm ơn bạn đã gợi ý ý tưởng nhé 😘
What ai voice do you use please tell
Hi bro, Idk you will see it or not. but can u make a video on creating a fully responsive and virtualized masonry component where i can pass data from outside and also render card. I tried react-virtualized but its not working finely, sometimes gettting key error sometime resize error etc.
I didnt understand how did you make color of front box as black
what is your vscode font family?
JetBrains Mono brother
@@lundeveloper Thanks
Does anybody know the name of the extension which shows these live error massages and warnings
This extension is called Error Lens.
@@lundeveloper thanks
first
Wow, thank you