A couple of notes: 1. The "card-border" element can actually be replaced with an "::after" pseudo element on the "card" element, removing the need for an extra div. 2. On the "card-content" element, instead of setting the height/width to calc(100% - 2px) and setting a margin of 1px. You can set "position: absolute" and "inset: 1px" and it will achieve the same border effect in a cleaner way. Learned this after making the vid and have updated the CodePen accordingly. Thanks for watching!
Love your videos. One question, why not simply use padding on parent to content instead of calc-2px or absolute + inset? Padding is so much more useful than absolute because the content can decide its size that way and the parent will auto adjust correctly, or the parent can set a size and child can follow, work both ways. Is there something wrong with padding? Seems so much easier that I feel like I am missing something? I just implemented this with padding.
Love how you wrote half JS logic only relevant to the current task and changed it later, instead of just writing the final one and going "you will understand this later in this tutorial".
Man's skill so clean I checked his youtube to find out how long it took him to be this good. Couldn't believe it was 2 years, even when the oldest video on there is from last year. So, went to his codepen, moved to the oldest pen, then looked at the comment section, the date? 6 years. Maan that's quite some time, salute the diligence.... could be longer coz even the oldest pen was top notch. CSS demi god we have here...
that's really cool. stuff like makes it feel so much more like a native app than a website I think. also love that the video isn't too long. great job!
Watching you create complex design with such ease and explaining each step is very helpful I would suggest taking your time in some other videos to explain some steps more easily, appreciate the content Keep it up!
I really appreciate the small bite sized steps you're able to break everything down into, and instead of showing the end code and saying "we'll get to this later, for now it just exists"
You can take this further by adding dynamic text-shadow that will change its position relative to the source of light (move your mouse to the right, and the shadow moves to the left), and bumping up the shadow blur the further you go from the center
That might be overdoing it. The effect is very minimal, it's supposed to be very light, not to be the focus of your attention. That being said, that's a really cool idea for a different kind of website
The fact you are explaining exactly what you are doing is helping me learn much faster!! Earned like comment and a sub from me! Love these kinds of videos, keep it up!
That's why I love programming, gives me the same feeling I had when I first saw a magic trick as a kid, then got shown the behind the scenes to it. I was like "I want to be that smart"
i recently saw this feature on windows 11 and i was wondering and idk how but youtube recomended this content. and im rly glad i saw it . apprecaite it man . good job
Waa I noticed this effect in my windows 10 calendar and I was like it's really cool hover effect sad that there's no tuto about this, then you made a video about it thank you !
I have noticed that Windows 10 has a similar effect in its UI and wanted to someday make it on my own, I am learning HTML and CSS (will learn JS after getting more familiar with CSS) currently and maybe in the future I'll do it using them too :)
Dont waste too much time in html and css..just make sure you have the fundamental in your arsenal..then as you make your own stuff .you upgrade em..just like your character in-game
yeah man. i've too noticed that windows interface has this design style, and i've ever thinking in create something identical. But if you will make this some day, know that this kind stuff can maked different ways. dont stay stuck only at video tutorials. good studies :)
Hi Dude, I would recommend to not think of webdev as you seem to be doing. The idea is not to master HTML, then go to the "next stage ", and master CSS, then go to the next stage and master JS. That is going to hinder your learning greatly Instead just learn the very basics from each one, and make a crude website. It's likely gonna be terrible. But then you can say: "How can I make it cool now?" And get ideas, you will then do your research and understand the features of the languages that you need to realize said ideas. And the beautiful thing is the web, is that there are hundreds of ways of archiving a particular objective. So what would I recommend? I would recommend you to go to Figma (Hell, go to PowerPoint even) and design a website layout. Then turn it into code, and then slowly add functionality to it. There you will really understand the type of things you will need to learn, and put all of the right tools to the test. Improving greatly in the process
@@variables6700 when it's applied everywhere, you start adding more visual clutter and it makes things hard to read. I think it could've been better if it was tweaked at least rather than be removed.
For anyone looking to have any interactable elements inside the cards, add "pointer-events: none;" to the "before" and "after" selectors. Otherwise if you have a button inside a card it will not work. Cheers!
The javascript doesnt seems to work for me? any idea why? everything seems normal but when I change background: radial-gradient(800px circle at 100px 100px) to var(--mouse-x) (--mouse-y) its not working? Any help? thanks
reading all the comments hurts my brain. single digit IQ individuals asking for what's the IDE when the description has a link, the video constantly displays "PEN SAVED", the description mentions it's CodePen and there are ALREADY other comments asking the same thing. if you can't do the very basic of reading (video, description, pinned comment) or research (reading other comments), you really won't have a successful career in software development
A couple of notes:
1. The "card-border" element can actually be replaced with an "::after" pseudo element on the "card" element, removing the need for an extra div.
2. On the "card-content" element, instead of setting the height/width to calc(100% - 2px) and setting a margin of 1px. You can set "position: absolute" and "inset: 1px" and it will achieve the same border effect in a cleaner way.
Learned this after making the vid and have updated the CodePen accordingly.
Thanks for watching!
nice stuff
also don't forget to add pointer-events: none; otherwise card won't be clickable because of z-index
Love your videos. One question, why not simply use padding on parent to content instead of calc-2px or absolute + inset? Padding is so much more useful than absolute because the content can decide its size that way and the parent will auto adjust correctly, or the parent can set a size and child can follow, work both ways. Is there something wrong with padding? Seems so much easier that I feel like I am missing something? I just implemented this with padding.
Did you just refactor the content of a video basically? 😂 Thanks for the video, the tricks you showed are really useful.
i was just thinking about ::after
Love how you wrote half JS logic only relevant to the current task and changed it later, instead of just writing the final one and going "you will understand this later in this tutorial".
Reading first half I thought you were being sarcastic, was gonna be like BRUH 😂
@@WyzrdCat Is that what you were gonna be like? Bruh? Bruh is what you were going to be like?
@@ahall9839 shut up
Man's skill so clean I checked his youtube to find out how long it took him to be this good. Couldn't believe it was 2 years, even when the oldest video on there is from last year. So, went to his codepen, moved to the oldest pen, then looked at the comment section, the date? 6 years. Maan that's quite some time, salute the diligence.... could be longer coz even the oldest pen was top notch. CSS demi god we have here...
that's really cool. stuff like makes it feel so much more like a native app than a website I think. also love that the video isn't too long. great job!
For sure, glad you enjoyed it!
Watching you create complex design with such ease and explaining each step is very helpful
I would suggest taking your time in some other videos to explain some steps more easily, appreciate the content
Keep it up!
I really appreciate the small bite sized steps you're able to break everything down into, and instead of showing the end code and saying "we'll get to this later, for now it just exists"
You can take this further by adding dynamic text-shadow that will change its position relative to the source of light (move your mouse to the right, and the shadow moves to the left), and bumping up the shadow blur the further you go from the center
That would be cool.
That might be overdoing it. The effect is very minimal, it's supposed to be very light, not to be the focus of your attention.
That being said, that's a really cool idea for a different kind of website
thanks you for shedding a light on this design
Old school flash effects are back baby!!
Love it :D
These videos are highly addictive and motivating! Great job!
It's such a beautiful yet simple effect. Thanks for sharing how to make it.
you just blown my mind, so simple but in the same time, so complex
The fact you are explaining exactly what you are doing is helping me learn much faster!! Earned like comment and a sub from me! Love these kinds of videos, keep it up!
I really loved how you explain while writing the code, that was fun to watch
you're a frontend god 🏆 your implementation is super smooth, and you're an eloquent instructor. keep it up bro
superdy duper
why is this channel so underrated
That's why I love programming, gives me the same feeling I had when I first saw a magic trick as a kid, then got shown the behind the scenes to it.
I was like "I want to be that smart"
This video brought back my motivation to keep learning web development. Thank you! The content is amazing and to me you code like a master
Quick and precise like the way I love it.
What an elegant video, great job.
Learned more in 5 minutes than a semester of CS
Awesome work Hyperplexed, looks super cool and convincing!
My man deserves a like and a subscribe.
I am glad I found your channel!!! Great work!
love your tutorials! keep up the good work!
🔥🔥
Bruh, I'm not even a frontend dev, but ur vids are fire, ngl 🔥
Thanks!
Thank you so much! Glad you enjoyed it!
Beautiful video, I was looking for it a lot.
i recently saw this feature on windows 11 and i was wondering and idk how but youtube recomended this content. and im rly glad i saw it . apprecaite it man . good job
They are spying on us
This is amazing. Thank you. Microsoft uses the same animation for their desktop notifications tiles.
Mind-blowing effect and explanation!
so glad I found this channel man
you're going to blow up soon enough
as a backend guy. this is so magical.
You are the magician of CSS.
Your voice is amazing it's like listening high quality podcast
this is beautiful, clear and understandable
Damn. Very nice one. Long time ago i learned something new from a css tutorial video.
I just needed this. Thank you so much
OMG !!! That was mind blowing!
You, sir, are a genius.
Waa I noticed this effect in my windows 10 calendar and I was like it's really cool hover effect sad that there's no tuto about this, then you made a video about it thank you !
Such great content.
Thanks RUclips for recommending me this.
very well tutorial i was looking for this, thanks ❤
Love your content, keep it up ❤
Just saw thesame style in my window 10, and out of no where and see this, wow thank you 😂
Woah, great video mate!
U just earned a sub man. awesome content, keep it going
Wow thats actual Good content! Subscribed.
You explained it well and the final code is very understandable but I'm not sure I agree that the effect is "pretty simple" :)
Very well done tutorial, props
GREAT CONTENT. happy to discover your channel. i loved it🤩🤩
Neat! You could make so many pens and tutos out of that source website. It's pretty amazing.
thanks, it actually let me through so i could download it.
I have noticed that Windows 10 has a similar effect in its UI and wanted to someday make it on my own, I am learning HTML and CSS (will learn JS after getting more familiar with CSS) currently and maybe in the future I'll do it using them too :)
Dont waste too much time in html and css..just make sure you have the fundamental in your arsenal..then as you make your own stuff .you upgrade em..just like your character in-game
yeah man. i've too noticed that windows interface has this design style, and i've ever thinking in create something identical. But if you will make this some day, know that this kind stuff can maked different ways. dont stay stuck only at video tutorials. good studies :)
Windows did it first actually, sad they didn’t get enough credits
Hi Dude, I would recommend to not think of webdev as you seem to be doing.
The idea is not to master HTML, then go to the "next stage ", and master CSS, then go to the next stage and master JS. That is going to hinder your learning greatly
Instead just learn the very basics from each one, and make a crude website. It's likely gonna be terrible. But then you can say: "How can I make it cool now?" And get ideas, you will then do your research and understand the features of the languages that you need to realize said ideas. And the beautiful thing is the web, is that there are hundreds of ways of archiving a particular objective.
So what would I recommend? I would recommend you to go to Figma (Hell, go to PowerPoint even) and design a website layout. Then turn it into code, and then slowly add functionality to it. There you will really understand the type of things you will need to learn, and put all of the right tools to the test. Improving greatly in the process
@@variables6700 when it's applied everywhere, you start adding more visual clutter and it makes things hard to read. I think it could've been better if it was tweaked at least rather than be removed.
Finally i found how to do the windows 10 hover effect
For anyone looking to have any interactable elements inside the cards, add "pointer-events: none;" to the "before" and "after" selectors. Otherwise if you have a button inside a card it will not work. Cheers!
You are a life saver thanks
Yea usually I would set the z index of the pseudo element to -1 but it’s better your way
Great work mate!
Windows 10 also uses this effect and I always loved it.
I've done this not so long ago and looks dope
I've always wondered how it works in windows 10 tiles. I got the answer now.
Like how a windows calendar from the task bar , get highlighted when you have a date
Awesome video, thanks for going step by step 🙏
Thank you so much
that is awesome! thanks!
Ok look, the video is great but you sound like you're speaking to me from the gates of heaven. 😭😂
Phenomenal tutorial!!
You got a sub, cool stuff
Thank you RUclips for me bring to me this channel 😎👍
all of us trying to center just one div and bro just centered six like it was nothing
mind-blowing! thanks for sharing
Huge thank you!
Yes, but how do you center a div?
I am mindblown right now
that’s actually pretty clever ngl
I can proudly say I was here before the 1 million sub mark. Your videos are absolutely insane, you're going to go much farther before you know it!
Same 😎
Superb. very relatable that I wanted to know
Damn, Fluent Design
Beautiful ❤️
Wow, this is just wow.
learned a lot, tnx!
you definitely earned a sub man ! also btw do you by anychance have any tutorails starting from the basics of html,css and js....?
you are a wizard to me
Thank you!
Just amazing 🎉
Teacher : don't worry the exercise isn't so complicated
The exercise :
How hard is CSS?
YES.
I love your videos tho.
Him: Its actually pretty simple.
Me: Ok this is gonna be interesting..
*30 seconds later*
Me: Wat is dis? How me supposed to do dis?
I'm so used to using Tailwind CSS for everything that I've forgotten how cool it is to write pure CSS! Thanks for this excellent tutorial!
The javascript doesnt seems to work for me? any idea why? everything seems normal but when I change background: radial-gradient(800px circle at 100px 100px) to var(--mouse-x) (--mouse-y) its not working? Any help? thanks
I wish cool stuff like this didn't need JavaScript
Thank you so much this helped a lot!!!! You saved my life
Jesh. Brilliant.
Microsoft thought they were so slick in 2015 with this effect
reading all the comments hurts my brain. single digit IQ individuals asking for what's the IDE when the description has a link, the video constantly displays "PEN SAVED", the description mentions it's CodePen and there are ALREADY other comments asking the same thing. if you can't do the very basic of reading (video, description, pinned comment) or research (reading other comments), you really won't have a successful career in software development
Amazing 🤯
Could someone please explain why he did "width: calc(100% - 20px);" on the .cards element?
each time i try to emulate this my javascript section does not work, html and css files are fine but my mouseover to highlight just wont work.
Thank you.
Literally the Windows 10 UI
learned a lot more in 5 minutes than 3 hours of boring css classes