Knowing I would NEVER work in front end, I enjoy watching this videos and seeing the shenanigans you guys need to do with css to make anything remotely usable
Dude, I feel like I’m in a rabbit hole right now. These videos are so damn good and the way you link another video at the end is just beautiful. Thank you for all this awesome content, you are providing me with so much inspiration and I can’t thank you enough. Keep up the awesome work!
I want a full CSS tutorial for you. You're the most precise. You explained what some things do, i couldn't understand them when I watched tutorial videos. Hope you will do it or maybe did it already lol.
I'm learning frontend design right now and seeing the tricks and tools you use to achieve effects is so fun, I can't wait to become able to do stuff like this.
Wow. Simple, precise, good explanation, good visualization. Easy to understand if you are a beginner only knowing the basics but still short and good enough as a quick cheat Ressource for the more experienced. I'm sure that's the first time ever I commented, liked and subscribed based on a single video and not knowing anything about the channel/creator/rest of the videos. And you managed that in like 3 minutes of watchtime.
I only briefly touched css years ago for a web design class and i have little intention of doing frontend/design again, but this content is presented well enough to keep me interested still. Props!
I have never seen this channel before, I don't code things I haven't since I was attending the art institute for multimedia and web design but I am now subbed cause this seems like the best short tutorials for coding things in CSS than I have ever seen and could come in handy in the future if I need it for something lol
Thanks for another great video! My little suggestion would be to make new videos with higher framerate. Even if the lower one is an artistic choice, it would be better with 60fps to fully see the changes and appreciate smooth animations. :)
This is peak tutorial video. To the point, everything shown, and important/obscure things explained, but it's also beautifully displayed and thoughtfully composed, down to the narration and music. Very nicely done.
i haven't worked with htnl/any coding language since the late 90's (when i was 10-12 years old), so watching this video, and seeing what you can really do with code on a site, kinda blows my mind. great vid, btw.
Your channel has been incredibly helpful in my software development journey. I appreciate the effort you put into creating such informative content, which has helped me learn how to approach problems and build things effectively. Thank you for all the amazing content you provide.
I didn't know this was a tutorial at first (thought it was a documentary about the effects of Twitch website), but I stayed all the way even if I don't plan on coding this. Thank you for making such concise videos as it really helps people 👍
Was surprised I had to scroll so far to see this, I thought this was really well-known. Inset: 0 is basically shorthand for for all of the sizing & positioning properties to be inherited, for example when using :before pseudo elements.
Really cool. One small thing: I wouldn't use this on an actual site without replacing the transition on background position for something more performance friendly. I'm sure there's a way to achieve the same effect with translate.
I'd have tried a transparent background, overflow hidden, and an ::after pseudo element with negative z-index to go under the card for the background. That way I could transform: translateX the ::after to achieve the sliding background effect in a performance friendly way
just a thought, i guess we don't necessarily need to put `background: linear-gradient(130deg, ....)`, can just write `to bottom right` instead of 130deg
1:33 instead of padding, wouldn't this be done with box-sizing? I understand what box-sizing is supposed to do, but it never works how I thought it was supposed to work. Thanks for these vids. excellent channel and content.
The only thing that sucks about this is accessibility. The subtitle shouldnt be a heading and you should probably exempt the spans from screenreaders and add a screenreader only element that just contains the sentence. Design on YT glosses over a11y wayyy too often. (also i18n and l10n, but those are generally less important depending on the audience)
Everyone can pause and apply. Step by step is perfect in this way. Wonderful content. Please don't stop.
this is 3 minutes long, compare this to other tutorial channel where they would spent like a whole 20 minutes of unedited recording.
wiseman once said please dont stop , keep goin
It's like scrolling on shorts, I'm just clicking your videos one after the other
Itssss sooooo gooooddd
Me too he's good just that showing the code and stuff is bad bug great videos
Same
To the point ,excellent and clear visuals and explanation, Subscribed ! please continue making these types of tutorials
^ this
Not really sure how this is the holy grail of CSS, but the tutorial is really impressive
The google fonts dark theme icon is the holy grail.
@@jotajsmoint It's just a rotation animation and a translate animation
@@jotajsmoint yeah i didnt find it too awesome too
@@ChadAV69 Which took a professional about an hour to do as a tutorial with little stopping or explanation.
It's the holy grail so he can get more views on the video.
Knowing I would NEVER work in front end, I enjoy watching this videos and seeing the shenanigans you guys need to do with css to make anything remotely usable
Try any other frontend framework or set of tools and you'll run back to HTML and CSS crying and begging for them to accept you again...
@@shapelessed Flutter is pretty great. No idea about performance differences though.
Dude, I feel like I’m in a rabbit hole right now.
These videos are so damn good and the way you link another video at the end is just beautiful.
Thank you for all this awesome content, you are providing me with so much inspiration and I can’t thank you enough.
Keep up the awesome work!
I want a full CSS tutorial for you. You're the most precise. You explained what some things do, i couldn't understand them when I watched tutorial videos. Hope you will do it or maybe did it already lol.
I'm learning frontend design right now and seeing the tricks and tools you use to achieve effects is so fun, I can't wait to become able to do stuff like this.
Wow. Simple, precise, good explanation, good visualization. Easy to understand if you are a beginner only knowing the basics but still short and good enough as a quick cheat Ressource for the more experienced.
I'm sure that's the first time ever I commented, liked and subscribed based on a single video and not knowing anything about the channel/creator/rest of the videos. And you managed that in like 3 minutes of watchtime.
I only briefly touched css years ago for a web design class and i have little intention of doing frontend/design again, but this content is presented well enough to keep me interested still. Props!
I don't even code but another video of yours got recommended to me and you make it seem interesting and approachable
I have never seen this channel before, I don't code things I haven't since I was attending the art institute for multimedia and web design but I am now subbed cause this seems like the best short tutorials for coding things in CSS than I have ever seen and could come in handy in the future if I need it for something lol
Thanks for another great video! My little suggestion would be to make new videos with higher framerate. Even if the lower one is an artistic choice, it would be better with 60fps to fully see the changes and appreciate smooth animations. :)
having a low framerate is fine, but 12fps is way too low
This is peak tutorial video. To the point, everything shown, and important/obscure things explained, but it's also beautifully displayed and thoughtfully composed, down to the narration and music. Very nicely done.
idk why am i so addicted ur content and also expanding my css knowledge...
i haven't worked with htnl/any coding language since the late 90's (when i was 10-12 years old), so watching this video, and seeing what you can really do with code on a site, kinda blows my mind. great vid, btw.
This is really cool. Keep creating more content like this
Your channel has been incredibly helpful in my software development journey. I appreciate the effort you put into creating such informative content, which has helped me learn how to approach problems and build things effectively. Thank you for all the amazing content you provide.
Damnnn ....feels like im watching a documentary...
Love the content, very nice that you take the time to explain visually :)
I didn't know this was a tutorial at first (thought it was a documentary about the effects of Twitch website), but I stayed all the way even if I don't plan on coding this.
Thank you for making such concise videos as it really helps people 👍
Instant subscription after this and previous video I've watched (the one about header and background color split following cursor)!
there are few RUclips channels for learning, where i keep the ads running, this channel is one of them.
Keep posting..loving ur content
just found your channel. This stuff is gold !!!
this is what i need for my programming class
... CSS tutorials?
@@minhuang8848 yess
1:34 instead of using calc() on every call with magic numbers inside ypu can also just set the
box-sizing: border-box;
I love your videos but this one seems to be in 12fps. Especially those transitions would look better in 60 / 50 / 30 fps
Lol seriously though, idk why this one ended up so choppy 😆
@@Hyperplexed it IS in 12 fps tho.
I love this channel so much❤️
That is obscenely cool. I can see combining this with some other background effects and maybe putting it inside an SVG curved region.
This may be the best way I’ve ever seen code explained
Thanks man
Wow man you are amazing! Thank you for making these videos
I'm not even a developer but your video is so easy to understand
This channel might be the best CSS channel on yt
amazing tutorial
ADA compliance would like to have a word. 😂 But this looks hella sweet!
You sound like Hitman 😂 I love it.
now this is quality content
love watching this in 10fps
Holy shit. This production quality is incredible.
Really cool tutorial! Really concise and clever!
Amazing video. Amazing content.
Amazing video. I love the way you annotate the video with arrows
Legitimately baffled at why this is the holy grail…
inset:0 my dude! 😁 Loved this. Really good commentary over your code
Was surprised I had to scroll so far to see this, I thought this was really well-known.
Inset: 0 is basically shorthand for for all of the sizing & positioning properties to be inherited, for example when using :before pseudo elements.
My new favourite channel
A mastery of CSS.
Thanks
really appreciate that you set your render settings to 5fps. looks really great.
Lol🤣
Omg it actually is super low frame rate too hahah.
I thought it was just the CSS part, but the entire video is in 12fps.
Well braid my hair and call me molly I just learned something.
😂
I do wish you rendered your animations out at 60fps. It deserves to be buttery smooth.
There’s something even crazier than the Holy Grail of Hover Effects?!!? How can it be??
Ima download it thanks for sharing!!
i have no idea what hes talking about but i love it
Him: I went through the trouble of reverse engineering…
Me: What trouble? 🤔 inspect and see source code… 😂
Wow, this is a fantastic tutorial! I can't wait to play with this in my webdev class 🥹
nice one ! with springs physics the subtitle animation could be even fancier
subbed for life. Thanks
my hero
Thank you are one of a kind. !!!
Thank you so much for taking the trouble ❤ I’m a big fan
Really cool. One small thing: I wouldn't use this on an actual site without replacing the transition on background position for something more performance friendly. I'm sure there's a way to achieve the same effect with translate.
I'd have tried a transparent background, overflow hidden, and an ::after pseudo element with negative z-index to go under the card for the background. That way I could transform: translateX the ::after to achieve the sliding background effect in a performance friendly way
Love 'em!
Cool easy to understand !
My Css Sensei
Lo you bro
My brain feels a little bigger now
please render your videos at 60fps, my eyes were bleeding during the entire video
im not even interested in front end development at all, or getting a programming job, but love the vids. I like programming as a hobby.
amazing
Loving want your doing! Subbed!!!
Tip. Use 1ch as margin between spans. This is the width of the character 0.
Godly contents
Top overengineered hover effect that looks good
damn, someone is having fun at job! I am jealous
omg thank you
Ah yes this looks nice, reminds me of they Greyscale background with alpha trick so the background can change colour on the fly ^.^
just a thought, i guess we don't necessarily need to put `background: linear-gradient(130deg, ....)`, can just write `to bottom right` instead of 130deg
❤❤
The only holy grail here is the holy grail of vocal fry.
Twitch design: S tier, Twitch platform decisions: D-
H3 and h4 should form part of the documents title structure, not for styling purposes.
Sweet video presentation tho 👍
Awesome stuff. Are you Jonny Arnett?? You both have a very similar voice tone
This needed to be 60fps to show the animation effects
I would like to know which video editing software do you use. Thanks for the great content!
how is this in any shape or form considered good?
Great work!
Alternate universe where Hugh Laurie's House went into webdev instead of becoming a drug addicted narrcisistic doctor
Great video. 🙏 Which software do you use for animating your videos?
Nearly, whilst you can change the width with calc, you could have instead just given the text box-sizing: border-box;
why is this video rendered at like 15 fps
1:33 instead of padding, wouldn't this be done with box-sizing?
I understand what box-sizing is supposed to do, but it never works how I thought it was supposed to work.
Thanks for these vids. excellent channel and content.
The only thing that sucks about this is accessibility. The subtitle shouldnt be a heading and you should probably exempt the spans from screenreaders and add a screenreader only element that just contains the sentence. Design on YT glosses over a11y wayyy too often. (also i18n and l10n, but those are generally less important depending on the audience)
nice pfp
Bro, how did you learn CSS and Javascript so well??????
the effect would be much more appreciated if this videos framerate wasn't like 15fps
you're showing off CSS transitions and hover effects at 24fps? incredible genius...
thank god dude I thought it was just my browser being shit
nice one
great recreation but you forgot the green square
what's the Visual Studio Code theme you're using here?
thank you!!
Me: drags over relevant wordpress element