Have You Ever Seen A Hover Effect This EXPLOSIVE 🤯
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Watch as I show you how to recreate the fancy hover effect from www.nathansmit....
Get Font Awesome Pro: fontawesome.co...
Support the channel: ko-fi.com/hype... (accepts PayPal, card, etc).
Tools used: HTML, CSS, JavaScript
CodePen: cdpn.io/mdjPzgM
Music Credits:
Cielo - StreamBeats - Lofi - Harris Heller
I love how you repeated yourself in the video to explain the has selector again, whereas most people would just leave it to the viewer to pause and rewatch that section. You've got a great sense of how to teach. Keep it up!
I really love to go back to codding bcz of his teachings
So true
Isn’t “has” pretty self explanatory? It’s literally what it sounds like
love how you disect each problem and then solve it individually! great content!!
that's how engineers do it
The golden concept
That's nothing Special, it's as if you say: "Wow youre taking small bites off this water melon instead of stuffing it in your mouth all at once, love it! So smart!" 😂
Top down perspective
Love how you analysed his video ! Great comment!
"I am way too lazy to go through and add a span tag to each of these letters, so I'm going to spend 10 times as long writing a function to do it for me." 💀
This is too relatable
it will be better for further customisation
That's sooo true! The best part is when you give up after one hour and do the simple thing you wanted to avoid.
@@adkoda6264 The bright side is you learn something along the way.
but you dont spend more time creating that function in this case
I needed to convert my grades to an American standard GPA for an application and I was too lazy to do the conversion math so I spent 4 hours making a web application to do it for me.
This is the way.
Holy crap, the editing is impeccable!!! Seriously incredible job!
I love your way of thinking and breaking down big problems into small problems. You are my inspiration for front end design.
This is one of the best channels I've seen in a while. Making educational content very entertaining isn't easy and you're nailing it
I'm mostly a backend developer but watching your videos really makes me wanna go write CSS immediately. I really need more videos like this one! Keep it up!
Comments like this probably highlight one of the biggest impacts the channel has! Hyperplexed is making CSS (which many devs find tedious or annoying) digestible, intuitive and exciting - and brief enough that anyone can spend a few minutes getting inspired!
am I lost in an ASMR web dev channel ? MAN YOUR VOICE !
“I’m too lazy … so I’m going to take ten times longer to write a function.” Amen
You should make a Udemy course Html,CSS & Js.
That will be amazing
I’d totally buy that!!
I would also want a design course from him
! DOIT !
YES! Take my money
I will learn again
3:23 it's funny and impressive because you'd have to type the whole thing out in the first place to make an illustration for the video and also write the function
Your editing during breakdowns has improved a ton. Nice use of hide/reveal effects and subtle zooming. Keep it up.
You've single handedly fuelled my interest in web design. Always been into coding, and I think this is something I want to learn. Awesome, smooth and elegantly simplistic videos. Loving it.
Thats a perfect example of: An designer's dream is a programmer's nightmare
I just realized how much i miss the roasting websites and fixing them videos, you are very talented ❤
Man I just love your video style, it's so relaxing and interesting and I learn new stuff at the same time!
Really love how you posed parts as a question rather than "Just do this."
I love how he explains it as if this is the first time doing it with all the thought process to go with it.
These videos are wild. Frontend never looked cooler.
This feels like Lofi CSS Captain Disillusion, and I'm here for it.
the way you dive into the issue is so fucking PRO ! love it
Insane amount of effort in just 4 minutes
i love how there's useful visualization instead of plain code
The part where you write the function, and show how it will transcribe in HTML was a great detail.
Great content as always!
Adding a random effect for each parameters of each characters would have been quite neat
As a UI/UX Designer, your work on steam got me addicted to your contents.
Again, you delivered more than what I expected.
"I'm not even sure of what we just did" that's my whole experience in web dev
I love when sometimes you repeat yourself to sum things up, it really makes it so much easier to understand for newbies!
A Django developer here. I have not even started learning beyond the basics regarding (HTML/CSS/JS), but you're content is just making more and more excited.
This is cool, but you lost the kerning when you made the letters individual blocks. It looks okay here, but there are many letter pairs (like A and V) that wouldn't look good next to each other using this method.
Pls make podcasts, courses on web dev with that voice, I was smiling the whole time coz of how beautifully u have explained and narrated it...*happy tears flow*
I am flutter dev with 4+ years experience but you made me start developing for web
"So I'm gonna spend ten times as long writing a function to do it for me". Oh man I can so relate to that sentence!
These are amazing. It is way easier to understand the code when we go through the problem solving, rather than just getting exposition dumped for 10 minutes.
This is what I call creativity!
The has selector is an amazing new addition that allows for sooo many things!
this is a true MASTERCLASS in CSS...just WOW...Even a non-developer person would appreciate this video!
would you ever consider doing a video on your own journey into front end development? i’m a big fan of your work!
you are an absolute godboss at explaining CSS,
I love it!!
This channel is a whole vibe.
"I'm too lazy to add span tags to every letter so I'm gonna go ahead and create a function to do that for me that takes ten times longer"
Gosh this is the most relatable thing to how I code I've ever heard 😂 Can't really hard-code when you know you can automate the process right?
Finally, the youtube algorithm brings me to the great explanation about Front end stuff,
congratulations you just got a new subscriber
Great work as always! Just a quick note, as of this writing CSS :has() isn't supported by Firefox (yet) - which may or may not be a deal-breaker for you. I tried using an extra div on the end (with pos:abs & ptr-evts:none), and messing with its opacity and the z-indexes of all elements involved, but it only half-worked. I guess you'd be back to adding/remove classes with JS on hover to do it properly without :has()
This has to be the best demonstration of :has i have ever seen
This is the first time I've seen a video of yours and I'm just fucking amazed. I didn't see anyone, ever explaining this beautiful
The end is just too good
Sir, you are gold! I love how you turn code into art, it feels wrong that your videos are literally for FREE!
Woahh it seems like some real hardwork has been done on making these videos as well as the explanation, I'm 2 mins in and the way you have explained is commendable and with all those effects it makes everything clearly understandable
Shame that the "some of our own customisations" bit of the video was covered by the end cards.
Yep sorry about that. Should be fixed now!
Great tutorial! Would love to see how you build a really great "enhance" tool! (Currently empty spaces collapse, no proper word wrapping...) Maybe an idea for an upcoming tutorial? 🙂
WHAT
A
PRESENTATION
!!
Your videos are making me fall in love once again with frontend development (and video editing too). Thank you so much man❤
what a gangster! this video got more and more intense as it went
Next level. Subscribed as soon as you said "...I'm going to spend 10 times as long writing a function instead".
Your videos never cease to wow me
Super cool and looks JUST like persona 5. I wanna see more of this
Speechless for the quality of both the video and the explanations.
I can't believe i couldn't find this channel up until now 😱
I don't even know CSS or web design, but stil these videos are good. Interesting to see how it works!
This is insanely good. Please more of this!
Very nice explanation for people with little experience in css, you dissected the problem in understandable chunks, thank you!
I hate the final effect, but goddamn I love the concepts taught to reach it. Loved this video.
10/10 Video. The visualization of each step is on POINT.
The lo-fi is the perfect companion
I am so thankful I found this channel 😭❤️
ur production is top tier
3:14, pardon the language but HOLY SHIT this entire sequence is ORGASMIC.
The way you use the animations while writing the function was brilliant !
Dude. Seriously underated
I love your problem solving, especially dividing big problems into small problems. It helped me a lot on my developing and on life!
Instant watch every video. Thanks for this.
So good! More, please!!!!
holly shit, i haven't seen such good quality content in months
Incredible teacher
One could change every line opacity when hovering the parent wrapper, and individually hovering a line would highlight it. This would avoid using :has, which has low browser support today.
There probably has a way using sibling selectors and :not too. However I can just be sure if I get my hands dirty with the code experimenting it.
I really like your explanation of the :has selector! I've been messing around with it for a little bit and it has a lot of potential. (if you get really creative with it you can make fun projects like a pure CSS mouse tracker)
Watching this was an experience
I'm learning so much CSS and how to address the problems properly through these videos. Thank you!
You are at god level 🔥
Bro dropped the best touch of a gradient text and said "that's fir another video"
I haven't touched css or html in years but your teaching style is so amazing that it made me wanna revisit it
Thanks to bubbling, you don't need :has(), you just create a selector when `.parent:hover > * {opacity: .5}` then you say `.parent > .child:hover {opacity: initial}`
Just my thoughts. Using :has() looks needlessly complicated, when you could just have parent:hover and child:hover. Child hover just overwrites the parent.
the break down of each step with the slick animations and the explanation is really nice!
One of the best content on TH-cam
The way you place visual cues for every step, the highlights, the animations, Amazing video!! I've never used CSS/JS but this video still made sense to me
Your videos are blowing my mind!
Great video, love the delivery!
I was solo f-ing happy 2 see a new hyperplexed video... Keep up the good work
it’s like a totally different way of thinking
Only if I had enough money, I would have joined the membership, sure one day
For now take some love ♥️
You are awesome sir
Who would have thought CSS could be therapeutic.
You could have also writen js for css transform, just displace it using a bezier curve and add little bit of randomisation on top of it.
Wow, you did outstanding with this video!
Never thought I'd enjoy reading someone's javascript code this much. Great content pal!
That's some high quality stuff
the only channel i would ever reduce playback speed
You are awesome!! Why can't others replicate this that you can have easily digestable tuts for such complex looking front-end concepts within 5 mins!!
Awesome teaching!
Love the way you explain all problems and then solve them ❤
I immediately tune out from a video the moment they mention the has selector. I would rather my CSS to work now and not in five years