I Fired a CSS Cannon at a Famous Streamer
HTML-код
- Опубликовано: 17 окт 2024
- Watch as I show you how I fired a metaphorical CSS Cannon at Ludwig. By this I mean that I recreated an effect from his video using CSS.
Merch: bit.ly/Hyperpl...
Support the channel: bit.ly/Support...
Tools used: HTML, CSS, JavaScript
CodePen: bit.ly/CodePen...
Ludwig video timestamp: bit.ly/LudwigV...
Music Licensed by Artlist:
Ikoliks - In the Kitchen of the Mountain King
Maya Belsitzman & Matan Ephrat - Chaplin - Scene 2
Nsee - Frozen Lake
![COLOMBIA vs. CHILE [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/TDjN4W3yy1k/mqdefault.jpg)
I don't even program and I'm not sure why I'm here but I highly enjoyed this.
Woah it’s Mumbo Jumbo! Love your vids!
Damn he got Mombo too!
When my worlds collide
for sure you can build this with redstone
css isn't really programming, it's just a language to make html look pretty and there isn't logic like in normal programming
This video is incredible. From the design to the conveyed information to the humor.
This is art
I was thinking exactly the same throughout the whole video. Just pure excellence.
Absolute Art
he made Fireship channel looks amature. i love both btw... don't shoot me.
bruh dont use my profile picture
Even the 3d editing!
As a back-end dev who has always been put off by front end, your videos make me want to pick up some CSS just to make something cool like this! So thank you for the inspiration!
Right, he doesn't teach design he walks us through the thought process behind how engineering these designs breaks down, the best way to explain these kinds of stuff to backend nerds like us.
im on the same boat as you lmfao
Same
Same here, it always seemed so finicky to me. Attention to detail in backend systems is important, obviously, but UI, it seems we take it for granted. I blame the tools.
@@theRPGmasterthe big thing for me is the lack of numbers. systems can run faster/more accurately/some other "better" while design is emotional and subjective. you cant get a number out of it until you have a large enough userbase that you can a/b test or similar
the other issue is that programmers would be totally fine with a website just being a massive list with a fuzzy find search bar at the top
Truly a fun way to learn css .
But learning css is already fun
@@ImNotFine44 🤨
@@knedlikcz6517 no no, he's right
@@ikoedgod me trying to figure out how to center a div:
@@ImNotFine44 the doctors should arrive in 15 minutes
Not only are your front end skills immaculate, the video editing is insane as well. The way you edited the cards so we see them from up top and every animation in beetween is just so good.
his editing software supports adding in JavaScript to add animations and stuff so I'm guessing that's how he's doing it
@@thecatontheceiling what editing software is he using?
"And i centered it on the screen"
I lost you there
The 3D animations in this are incredible, another great vid well done
Big 3Blue1Brown vibes
Yeah, and I love how much more complicated they are compared to the animation that the video is focused on replicating :dd
I started watching you a bit less than 9 months ago. Every video you have uploaded has leaped in quality. This video was absolutely fantastic, from the editing to the humor to the information to the music. Amazing as always!
the crossover episode i never knew i needed
This is hands down one of the best videos I've seen on the platform, unbelievable quality fitted in such a short time frame
I don't even watch to learn, its just too enjoying to watch you videos. Keep up the good work ❤
WOW, I am so impressed by your ability to translate how typical programming decisions get made, and the complex 3D models you have in your head to solve it all. Fantastic video and animations!!!
These videos are helping me so much in my project. Thanks man
This is actually a very interesting concept you brought up in the end. It would make a page very immerseful
Woah. somebody took a premiere course. exceptional video as per usual but the editing is a step up. cheers
This was the best video I've seen today. Short, sweet and easy to follow!
Amazing, please keep doing videos as often as you can, I love them ❤
These are some of my favorite videos. Thanks for sharing (:
the only reason why I subscribed you ! Thanks for motivating KING !
The real magic in this video is your animating on explaining how everything worked. Bravo!
Wow the visual representations are amazing. Sick video
Your videos are actually so underrated. Keep up the great content!👍🏻💯
I always imagined it was the separate images on separate sides, it being one stretched image wouldn't even come to mind.
As a subscriber to both this is not a crossover I was expecting
I started watching Ludwig during among us phase, right before the subathon so it was crazy to see everything unfolds and how successful he has become over the years.
I kinda been watching on the sidelines since his move to RUclips but supporting nonetheless !
YOINK
This is awesome. Your animations to show the example were also great. Nice work
What a time to be alive inline with such god tier content
A fellow scholar in disguise!
If only there was a paper
The explanation video editing is just iconic, thanks man
those animations are just stunning omg
The details in your videos are amazing!
Your videos somehow keep getting better and better tf
I love how your videos are starting to become more and more dummy friendly, the effort to make them more digestible really shows.
Yet even though they're more educational they're just as fun as always if not more
love your videos man. keep doing what this thing is
This whole video was so impressive. I think the editing was nice, but more importantly I think the storytelling was super amazing. How you got across clearly so much about programming and managed to make it so interesting. While also retaining such a short runtime. Great job!
Knowledge with a bit of comedy 😅 Love the way you explain stuff. Really Impressive 💯👏
Every single one is a gem. Thank you.
Your best video so far ! It was so fun to watch, and the knowledge you can learn by just watching it... damn, so good !
A collaboration (sort of) I never expected, great work as always
Very entertaining video! They just keep getting better and better :)
The 3D animations are incredible, this is some insane quality stuff
he accomplished them with css
What 3D? 😏
But yeah great 3D animations for the video
I love how watching your videos takes me to a journey. And I still learn and get inspired in the process.
I like how the visuals you made to showcase your process of making the effect in CSS is way more complicated than actually making the effect in CSS
your production value is always becoming better! loved this video
This was incredibly well edited and produced. Great work!
Amazing vid! What software do you use to edit it?
LMAO THE ENDING i love this guy allready
I love the full thought process and envy your proficiency :)
The editing, animation and narration are simply just off the charts, very amusing.
Your best video so far, your skill in simplyfiying and explaining is insane, and the humor in this was superb
wow the animations in this Video are mind blowing!!!
The explanation visuals were VERY good 👏
Woooow, the video quality is increasing dramatically, good job dude.
You are so SMART!
Thanks for doing a great Job!
Wow! This is the best one of these yet!!!
this is such a dope video. Job well done making CSS actually explainable to all of us!!!
The quality of these videos are leveling up real quick, keep the work man !
I'm always impressed by your videos. The way you explain, analyze and re-create ideas and effects is amazing. They all have got a “Wow Effect”. Like What the F… 😄 Keep up the good work and have a nice weekend.
The point: vanity projects, sizzle reels, and conference websites built by-and-for front-end developers and designers. But… but probably mostly vanity projects.
Excellent content, as always!
I did not no i was looking for this content. But the fascination of this effect was defenitely conveyed in an elegant and playful manner. This opened up the video even for non programmers. Well done.
It's good that ur video editing skills are improving gj❤
I loved everything about this video. You have really stepped it up in this one, awesome work!
I've been learning CSS this past year, and i genuinely enjoyed this video because I got to understand it
The way like sponsoring fits naturally in the video is amazing
I was extremely surprised when I saw there is no JavaScript code for this needed. This is why HTML+CSS is turing complete. Well done!
The production quality keeps getting better with every release. Keep up the good work :)
Hover effect, a Draggable item effect, or a selected item effect (say when editing a layout of images for an Instagram clone, that kinda thing) were definitely my first thought seeing it. Can’t wait to try it out myself :):):)
Dope video! Love it!!
Babe wake up, new Hyperplexed video just dropped
Love your videos, love the humor , I'm a beginner and these are truly inspiring !
This channel makes me fall in love with css. Truly amazing
I like the idea, it gives good practice and adds tools to the toolbelt
it's like commandement for ui develeper "Thou shalt not watch without copy thine design."
im always stunned by the quality of your videos! I really appriciate your effort :)
JAJHAHA, WHAT! Bro just said: "nah, forget it, I quit"
Good explanation. You should make a course about CSS or JavaScript. I would totally watch it.
Incredible animations! Youre very good at explaining concepts
I know so very little about programming but I would 100% watch a million videos like this.
I don't think I have seen any sleeker video editing skills. Conveys the information in such an artistic way. I need to learn this
You should make a video on how you make videos. The effects are amazing and i have seen a few keyframes in my life!
Using transform: scale() would have been my go to as well just to make it work, but there is transform: translateZ(20px) to actually move items further away on the z axis. For this to work you will have to define a "perspective(100px)" for example. The Perspective will be the starting point where the element will be rendered. 100px will start rendering elements 100px far away from your computer screen into the website. Our translateZ(20px) element would then be rendered 20px further away from the starting point, actually rendering it at 120px on the Z axis
I wish your videos were a bit longer. Great humor and nice code as always
This guy continues surprising me with each video
This guy is so underrated, great skills, amazing humor and actually have a good narrative voice !!
why this video is not shared and viewed as it should be not even from coding perspective but such a great humor, video producing nice to watch and the voice. even i'm with my 0 knowledge of coding watching it and was like i need more of it, i need more series like this :D after few seasons i can be a jr developer or at least comedian lol
So in love with your videos
Crazy how fast your channel grew I remember subscribing when you only had like 2k subs
i was here at like 10k and thought this was another fireship channel lol
great content tho and this channel totally deserved it
The reason it would be useful on a website is because more eye catching things such as cool effects might be interesting to viewers causing them to learn more about what they were hovering on, if this was used to catch the eyes of viewers to buy something, it would be more effective then a flat image without an effect. This can cause an increase in clicks. Your welcome. 🤓
The amount of work you put in the video animation to show how you animate an image with CSS is crazy!! I really respect your work! Keep it going!
I would love to see a vide on how you made this video. The animations were really well done, very captain disillusion
Came here from Ludwig's latest stream. Awesome video!! If I didn't hate CSS so much, if be genuinely tempted to try this for myself lol.
the 3d animation was so good
this video was so good
Wow. The 3D animation explanation is absolutely amazing work! Keep it going! 🎉
Before discovering your channel I used to hate CSS . You are amazing man !
absolutely despise coding, absolutely need those kind of videos
Love the 3d graphics in the video, you should use those effects more
"Eh, somebody smarter then me figure it out". This man, you made me laugh so hard. Thanks again Hyper! 💪
I have no idea how to code or anything like that. And i know its very difficult to master. But your videos explain it in a way that makes me feel like I can learn it within 10 minutes! Great video!
This might be your best video
Love your videos Great work bro ❤❤
legend has it this video was animated on a website.
"Can I? Yes. Why? Beats me"
HOWWWWWWWWWWWW?????????? HOW ARE YOU SO MUCH FRICKING GREAT IN EDITING!!!??? THE 3D ANIMATION WAS SOOOOO PERFECT!!!!!!