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
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 👍
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.
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
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?
"Hi! I really appreciate the effort you put into these videos and the helpful content you share. However, I find it a bit difficult to follow sometimes because of the tone and pace of the voice. I’ve had trouble finishing some videos because it becomes a bit overwhelming. I just wanted to share this as constructive feedback. Keep up the good work, though!"
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?
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.
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 ?
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.
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😅
Dude - YOU ARE AN EGGHEAD, in the best kind of way! Thanks for your vids...
Thank you for watching my video 😍😍
A very nice tutorial on CSS Variables and quite different from other content on TH-cam
Thank you, Hope it will be useful
Very Well Explained in easy words, Thanks alot bro!
Thank you helping us take on a different approach in creating solutions. 120% support this channel
Just awsome ! Thanks for dropping this
So it's CSS with types, nice 👍
We need more in-depth videos. Keep it up, bro.
Goated ❤ thanks bro
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.
excellent video, thanks
Really excited for the next upcoming ThreeJs tutorials.
truly amazing, love your content
Concise and practical, thank you
Amazing content. Congratulations!
Wow, this is such a fantastic knowledge! Thank you very much, you have a new subscriber.
Thank you so much brother ❤️
oh wow! i think, those where the fastest 10 Minutes in my life! The video was very entertaining, thank you!
That channel is great and videos become better and better. Thanks for your guides🤝👍
Now I understand !! Thanks man !!
Thank you for detailed explanation. it' s amazing trick. Love it ❤
you have the best content bro, concise and clear very helpful.
Thanks, I always want to create a short but informative video 😘😘
Wow i have learnt many new things in css from this channel 👍🏻
You are the best man!! Your channel is really Amazing
Thanks brother
Love learning from you, your methods inspire me to tinker and test with is not written.🍀
Thank you brother 🍀
Holy shit. This is gold. Thanks for dropping this in.
Such a great channel man, thanks for the explanations
Bro you are amazing, thanks for the video ❤
This was informative! Thanks for the video
Thanks sir you are great and thanks for sharing videos for our learning ❤ keep it up sir for more videos
Dude you save my life i love you ❤
Great video, thanks!
Your videos are literally a treasure ❤
Thank you brother 😍
Proprty is kinda like the const and Typescript of CSS 🤣
AMAZING.... Thank you !!!
😍😍😍
Very useful, Thank You
Love from india ❤🇮🇳
Thank you, love India ❤️❤️❤️
Wow it's like CSS with Types
I LOVE YOUR SFX!
so much details🔥
🎉🎉 Great Tricks 🎉❤
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 🥰
That was dope!!!
Thanks brother 😘😘
it was my request to make this video
thanks a lot, dear
thank you soo much
❤❤❤❤❤❤
Thank you for watching my content 😍
Cool staff, man!
i gotta admit pretty impressive .
it was next level bro
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 👍
Thank you bro!
great content for the 5th time
Mr. web development teacher, I'm comming 😎
It's time for us to go to class 😘
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.
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 ❤️❤️❤️❤️
For next video can you make it about view transitions that would be fire😊
🔥
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 😎
Thanks!!
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
do a live stream or a video on ' fully functional creating ecommerce website' please bro
An interesting suggestion 🥰
great idea
o video ficou muito bom com esses sons
Thank you for watching this video
very nice
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?
Great🎉May I ask which type of mechanical keyboard and switches you are using
Cool voice 🎉
I want to learn css like you from where should I begin ? Any tips?
Mantap
this is gold
Cảm ơn Nam nhé 😉
Great video! But are you also playing some sort of game to see if we are paying attention?
Title: Propery
07:44 Proprty
❤❤❤
"Hi! I really appreciate the effort you put into these videos and the helpful content you share. However, I find it a bit difficult to follow sometimes because of the tone and pace of the voice. I’ve had trouble finishing some videos because it becomes a bit overwhelming. I just wanted to share this as constructive feedback. Keep up the good work, though!"
please bring nodejs and backend programming series I want to learn from you please
Nice
Thanks brother
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!!
Ok, when are we going to have your CSS course?
Which vscode extension make the tap bar RGB
🤯
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?
G.O.A.T.
how to custom your tab vscode ? can give your setting or recommendation ext, thanks
Bro your explanation is fucking awesome.
Love from india bro😊
Thank you for watching ky content brother, love INDIA ❤️
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.
As a beginner😱🤒
I wanna know what vs code theme you use ? I love tthis
You will find its information in the description
hello bro which app do you use for recording and editing your videos
Great vid. The title has "Propery" instead of "property"
OMG, so careless 🥲
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é 😘
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.
Hello can you also make a 3d clothing website with html, css and javascript.
Does anybody know the name of the extension which shows these live error massages and warnings
This extension is called Error Lens.
@@lundeveloper thanks
Can me make a circular loading progress bar
What ai voice do you use please tell
Where do you learn from????????
How did you learn to code with CSS so well, which resources did you use, please share with us.
I didnt understand how did you make color of front box as black