@@Tenchi707 It seemed like that for me too, but I have come rather far myself. Making websites in different frameworks, slowly but surely getting more and more used to the heavy JS programming. It's all about time and commitment. Do it at your pace.
That animation has to be hand drawn in frames and then use some code to generate the box-shadows. Ain't nobody got time to do that by hand. Edit: Turns out, he had time for that. I wouldn't have, but kudos to them for doing it the hard way.
What did he say about it? If he said he did it by hand, the truth must be somewhere in between. Like, not auto-generate the whole thing after animating it with a dedicated tool. But perhaps writing the tool that would allow something similar.
I definitely did it all by hand. I just updated each number by -1 to move the background across. Sublime has a handy feature to skip to the same place in every line.
Amazing video. Really love CSS/HTML creativity level cause no body takes these 2 coding language seriously 😅 but as a front end developer I still love the power of HTML/CSS. Amazing!!
I believe you can export box shadows in a couple of pixel animation tools like Aseprite. So it's more like creating a pixel animation on a pixel tool software and then exporting the frames.
And then there's me, who's about a month into learning web dev, super happy about being able to make stuff move on hover :D these are sooooooo impressive...
You should bring Alvaro atleast once to the channel , it will be so worthy to see Alvaro explaining his ideas and thoughts whole making something Pls Kevin do this
Yeah conic gradients can make some pretty cool stuff. On the website I'm working on right now I needed to make a banner with lines sticking out from a center circle, and I was able to make it using a combination of conic gradients and svg.
For the large animation where you make insane size boxshadows is not done by hand. You use a painting tool to create frames of a animation, And create something like a powershell script to convert that to boxshadow code. Then you are only left with programming a loop to display the frames again as a animation. Converting things like this i have done in the past for a lot of things. For example you have a huge web application with a lot of different pages, i put all the CSS in a single huge CSS file which is a bit of a loading waste for a single page (i try to optimize to the max for loading speed as Google does with its search page). So i did write a script that can open all pages look at the pages and decide what items from the CSS are used and copy those over to a CSS file that is linked as preferred for that page and the full CSS is only loaded as fallback when there is no page specific CSS. So i can design in my crude way all in one huge file. And run a script once to create the most optimized CSS for every single page so that it is as little as possible static content for the webserver. This way each webserver can handle the most sessions.
I would argue that, in this context, spans are just divs with a different default style. But then so are the html, html:before and html:after elements. So I guess everybody is using your trick. I think empty html file is a more appropriate name for it.
This is part 1 of 3 on box-shadows that I did: ruclips.net/video/-JNRQ5HjNeI/видео.html And this is one I did on gradients ruclips.net/video/4kWHW7da4U8/видео.html Hope they help!
I think I know how the scrolling man was started. ASCII art. I remember doing animated ASCII art decades ago. I think that if you start from ASCII art, you do replaces based upon the character to a given color code or css code. I can see how to do it within an app like BBEdit, but am trying to think about a way the whole process might be automated with scripting.
OMG! Divs are the ONLY part of HTML I like! I keep trying to make all the other elements just go away. But these are amazing. Thanks to the authors for sharing!
I got a challenge (not gonna try myself, just curious to see what peops come up with), make a full on game with just css, even better if you manage 3d 12:49, Shoulda kept quiet until I finished watching XD
The one by Ben Evans, Is most likely an autogenerated one. I wrote a script a while ago just for fun that takes in an image and outputs a box shadow css for each pixel in the image, when this monstrous box shadow is applied to a 1px X 1px div it will perfectly render the image. Ben here just took it to the next level by having different shadows for different keyframes, so it feels like a video. I am surprised the browsers can handle it so seamlessly, because one 100x100 image for me generated about 7k lines of box-shadows and that was after I eliminated all the transparent pixels.
I think the one Wirth box shadow as been done by AI. Probably add a javascript decoder of a GIF into array then each array get transform into box shadow. Quite simple if he did it like that.
how the hell are people doing this Kevin please make some tutorials on this type of things by the way love your videos me and my office colleagues watch your videos together
Hey Kevin, really liked the video: mind blown with the pixel art walking animation. I basically never comment anywhere but wanted to mention that maybe in this video there should be a warning for epilepsy somewhere because there are some (maybe) problematic the patterns in the animations. I'm not really sure, but it's just a note ^^
Got confirmation from the creator, the pixel-art animation was hand coded 🤯
You can see him create it here: ruclips.net/video/KACYxrl9Mjw/видео.html
no way.... How do you withstand the urge to automate that whole process instead? 😅
You mean that every single box-shadow line is typed out? Thats insanity if its true lol
Mind blown...! 😲
Didn't feel like automating it with a program, so he just became the program.
Jesus that is impressive, if anything for the time this must have taken.
That person is john wick of css. The sheer patience displayed typing every box shadow.
Divs? Where we're going, we don't need divs
You win the internet today, sir
Divs? We have divs at home
Divs at home:
Won't need s either
That quote is going to be my next t-shirt
I say this everytime i put my sunglasses on. Roads? 😎
Ive started learning HTML and CSS 3-4months ago and its a bit depressing to see how much can be done, yet I know so little.
Outstanding stuff.
just push on, everything comes with time and most of this was probably made on 20 cups of coffee at 2 am after the house burned down.
@@theulfhednar2655 i don't think I'll ever acheive what's shown in the video, it's too much, way too much for my tiny brain
@@Tenchi707 It seemed like that for me too, but I have come rather far myself. Making websites in different frameworks, slowly but surely getting more and more used to the heavy JS programming.
It's all about time and commitment. Do it at your pace.
I couldn't have even imagined that was possible. I hadn't even dreamed about it! This is sooooo amazing!!!!!!!!!!
@Pawan Poudel yes
Imagine putting a single div or span with a class "x" and the css turns it into this beautiful phone message animation... woah.
pushing components to the max
@ 6:20 There has to be some program or tool to generate that box-shadows script. I can't believe that was done by a human.
I'm not clever enough to do it any other way than by hand :) Here's proof: ruclips.net/video/KACYxrl9Mjw/видео.html
definitely
I don't understand how anybody wouldn't just immediately assume that.
Thanks for the walk through! These are really amazing examples of CSS, and a lot of fun to watch! ❤❤👍👍
That animation has to be hand drawn in frames and then use some code to generate the box-shadows. Ain't nobody got time to do that by hand.
Edit: Turns out, he had time for that. I wouldn't have, but kudos to them for doing it the hard way.
Sadly it was all done by hand: ruclips.net/video/KACYxrl9Mjw/видео.html
No way, I refuse to believe that was done manually. 🤯
What did he say about it?
If he said he did it by hand, the truth must be somewhere in between.
Like, not auto-generate the whole thing after animating it with a dedicated tool.
But perhaps writing the tool that would allow something similar.
I definitely did it all by hand. I just updated each number by -1 to move the background across. Sublime has a handy feature to skip to the same place in every line.
@@ivorjetski Dang. I still can't quite wrap my head around it. But I can definitely respect you doing all that in a code editor.
Their is so many creative people all across the globe. Amazing videos thanks for sharing Kevin
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
Amazing video. Really love CSS/HTML creativity level cause no body takes these 2 coding language seriously 😅 but as a front end developer I still love the power of HTML/CSS. Amazing!!
the walking animation with just box shadows @ 5:20 must be auto generated. the one he coded is the generator. MUST BE!
That must be it. I would create the animation by drawing every image, then translate every pixel to a box-shadow
Nope :) ruclips.net/video/KACYxrl9Mjw/видео.html
I believe you can export box shadows in a couple of pixel animation tools like Aseprite.
So it's more like creating a pixel animation on a pixel tool software and then exporting the frames.
@@Naej7 👍
It's done by hand .. as said somewhere in above comments
And then there's me, who's about a month into learning web dev, super happy about being able to make stuff move on hover :D these are sooooooo impressive...
You should bring Alvaro atleast once to the channel , it will be so worthy to see Alvaro explaining his ideas and thoughts whole making something
Pls Kevin do this
Yeah conic gradients can make some pretty cool stuff. On the website I'm working on right now I needed to make a banner with lines sticking out from a center circle, and I was able to make it using a combination of conic gradients and svg.
those box shadows are crazy!
that guy Ben Evans is way beyond CSS, is Amazing!
Loved your reactions. 6:54 "Ben how?" lol. And the last one made me laugh
For the large animation where you make insane size boxshadows is not done by hand. You use a painting tool to create frames of a animation, And create something like a powershell script to convert that to boxshadow code. Then you are only left with programming a loop to display the frames again as a animation. Converting things like this i have done in the past for a lot of things. For example you have a huge web application with a lot of different pages, i put all the CSS in a single huge CSS file which is a bit of a loading waste for a single page (i try to optimize to the max for loading speed as Google does with its search page). So i did write a script that can open all pages look at the pages and decide what items from the CSS are used and copy those over to a CSS file that is linked as preferred for that page and the full CSS is only loaded as fallback when there is no page specific CSS. So i can design in my crude way all in one huge file. And run a script once to create the most optimized CSS for every single page so that it is as little as possible static content for the webserver. This way each webserver can handle the most sessions.
I have confirmation from the creator that it was done hand, including video of him making it. Check my pinned comment
That last one was on point! 🤣
Wow! the kind of things people do with CSS im sure even the creators of CSS have no idea it could do that !
yeah thats 7:28 seems like its just drawing pixels as box-shadows
you can make a simple program to convert your pixel data into box shadows
Ended on the best one! 🤣
These are all extremely impressive!!
- Wait, it's all box-shadows?!
- 🔫 Always has been.
Doing HTML/CSS over 10 years now and feel like a noob watching this xD
For some reason I expected this to just be a bunch of spans with display block, lol
I would argue that, in this context, spans are just divs with a different default style. But then so are the html, html:before and html:after elements. So I guess everybody is using your trick.
I think empty html file is a more appropriate name for it.
Love these videos!
Always has been *[insert astronaut meme]*
09:06 seems like earrings are set to transparent, setting it to any other color should show it
Love your stuff! Big help!
The new code pre-requisite ability is box shadow pixel animation, if you can't do that don't even apply.
I have seen this particular Pen with the woman with glasses and have been blown away by some of the things people have done
Hey Kevin, amazing channel. Quick question, is there a market for top notch css (only) masters? Or they need to know more technologies?
THESE ARE NEXT LEVEL DANG!
Pls make a video on "how linear gradients work" and "how box shadow work"
Like you did with flexbox and
border-radius 🤧
This is part 1 of 3 on box-shadows that I did: ruclips.net/video/-JNRQ5HjNeI/видео.html
And this is one I did on gradients ruclips.net/video/4kWHW7da4U8/видео.html
Hope they help!
I think I know how the scrolling man was started. ASCII art. I remember doing animated ASCII art decades ago. I think that if you start from ASCII art, you do replaces based upon the character to a given color code or css code. I can see how to do it within an app like BBEdit, but am trying to think about a way the whole process might be automated with scripting.
“Adam, what are we watching?” 🤣
OMG! Divs are the ONLY part of HTML I like! I keep trying to make all the other elements just go away. But these are amazing. Thanks to the authors for sharing!
14:25 I immidiately thought "Hey. That's Raindbow Islands (The story of Bubble Bobble)" :D
07:00 i think he uses some software (algorithm) he wrote to generate this 🤷♂ (that's the only way I can think of)
The car game reminded me so hard of the interactive ads from back in the day.
I forgot about those 😂
Damn have they stopped existing? I didn't even notice lol! You're right. As if they were made for kids to click by accident.
Css is not programming lang, you can't crate game in them!
css programmers: 13:14
The blob effect ~@2:29 is not working on my iphone :(
Experimental stuff like they do with these things often has limited browser support
thanks man, I missed this content
Yeah that last one had me laughing so hard. I can't build anything yet but, these give me hope! One day 🤞🤞
That driving game would be great as a ski game! 😃
3 seconds of silence after „holy moly“…. That could be and interesting video…
This works Hella good! Recommended
Thank you, it works perfect!
3:50 you forgot to heart this one, the “trippy to watch” one.
I got a challenge (not gonna try myself, just curious to see what peops come up with), make a full on game with just css, even better if you manage 3d
12:49, Shoulda kept quiet until I finished watching XD
The one by Ben Evans, Is most likely an autogenerated one.
I wrote a script a while ago just for fun that takes in an image and outputs a box shadow css for each pixel in the image, when this monstrous box shadow is applied to a 1px X 1px div it will perfectly render the image.
Ben here just took it to the next level by having different shadows for different keyframes, so it feels like a video.
I am surprised the browsers can handle it so seamlessly, because one 100x100 image for me generated about 7k lines of box-shadows and that was after I eliminated all the transparent pixels.
Nope. I just did it all by hand because I'm silly :) ruclips.net/video/KACYxrl9Mjw/видео.html
he actually made it by hand, the pinned comment links the video where he shows himself coding it
This title means something very different if you play Pathfinder, where Divs are a creature
Plottwist: span { display: block; }
OMG. 😍🤩😵💫😵
I enjoy watching these no divs challenges.
Divs are just boxes, the body is just another box.
Yes, but they are making *all* of that with just that one box, whereas usually CSS art is like, 500 divs
I think the one Wirth box shadow as been done by AI. Probably add a javascript decoder of a GIF into array then each array get transform into box shadow. Quite simple if he did it like that.
I was skipping around, so I didn't hear if you noticed the earrings were 0 opacity. 👍
Ah, I didn't! Wish I had so I could have turned them on!
@@KevinPowell I didn't like how they looked like, so I set them to transparent 😳
Those are very funny. I would like to spend all my time for such these arts...
these guys simulated fluids in a browser
The pixel walking girl was probably programmatically made. No one would write that by hand
read the pinned comment
7:09 This is probably generated by some (custom) tool
THAT WAS AMAZING!!!
The walking man is probably just drawn animated, then something just takes each pixels on each frame and makes a box shadow at a certain position
Confirmation from the creator it's all hand-made. Check my pinned comment for a video of him working on it
@@KevinPowell ... "but why" meme
He hates his own life or what haha
8:34 Kevin's perfect woman.
Blob: cubic Bezier point transformation on curve points.
how the hell are people doing this Kevin please make some tutorials on this type of things by the way love your videos me and my office colleagues watch your videos together
him: no divs
me: uses some other tag
The elephant rocks! :D
Such cool things with css yet websites are so dull especially on phones.
I used this technique roundabout 8 years ago for a JS-Pacman-replica, but it's fantastically working!
there is image to shadow converter just search
Adam is the most creative 🤞
Can i record real internts to??
OMG! and I think am good in css🤣🤣
Huge respect 🙏
I need at least 50 divs at all times
Me too!
That last one 😂
span{display:block}
no HTMl isn't right at all. there is a html and a body so they kinda do CSS with HTML elements, don't they?
Wow! I didn't think it's possible!!!
P.S.: Please make a video about css-doodle 😉
What in the absolute position have I just watched 🤯
They CSSed too close to the sun.
Hey Kevin, really liked the video: mind blown with the pixel art walking animation. I basically never comment anywhere but wanted to mention that maybe in this video there should be a warning for epilepsy somewhere because there are some (maybe) problematic the patterns in the animations. I'm not really sure, but it's just a note ^^
isnt it made from some kind of generators? obviously dude doesnt write that by hand, like that moving character
Check the pinned comment, there's a video of him typing the whole thing.
god damn!!!! that's some next level SHIT
No divs? No problem we have span :)
So what you are telling me is none of these guys know how to center a div😂
Wow - mind blown!
the earings are transperent (#0000)
Atif is a guru
These are obviously generated, no one can write 1 million lines of CSS
excuse me, that's illegal
Also, for the box shadows, a script was probably used to convert image pixels into box shadow properties
Creator of the box-shadows one confirmed with me that it was made by hand. My pinned comment has a video of him working on it
@@KevinPowell well it's still illegal holy hell
Broooo.... What the else does people even have in their brains
6:18 holy moly xDDD
Amazing!
deserves a double click on like, just like your clicks on heart
It triggered me to be honest 😂
Iwill do it with h1 tags hehe
n little code not a 1000+ lines
then ben's is 40 million lines lol
I feel noob when I see things like this 7:05