Front-end dev reacts to amazing CSS-only Codepens
Вставка
- Опубліковано 3 гру 2024
- People say I'm the king, but like... yeah this stuff is insane 😅. Make sure you check out the codepens below so you can see them all in more detail, all so amazing!
If you'd like to learn how 3D stuff is done with CSS, Amit Sheen showed me the ropes in building a 3D, rotating cube with a bouncing ball on top of it: • 3D CSS - lighting, ani...
🔗 Links
✅ 3D effect on hover by Vincent Durand - codepen.io/one...
✅ Free Radicals by Noah Blon - codepen.io/noa...
✅ Animated cube slider by Alberto Hartzet - codepen.io/hrt...
✅ Pure CSS Playing Card by Ben Evans - codepen.io/ivo...
✅ 3D step counter card by Steve Gardner - codepen.io/ste...
✅ Pure CSS Still Life by Ben Evans - codepen.io/ivo...
✅ Mona Lisa with pure CSS by Jay Salvat - codepen.io/jay...
✅ 3D CSS Typography by Noah Blon - codepen.io/noa...
✅ Newton's Cradle by Amit Sheen: codepen.io/ami...
✅ Polypane Browser: polypane.app/
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
For something like the Mona Lisa box shadow painting, this feels like it might have been generated from some sort of other script rather than tediously typed by hand. Still pretty cool, but it's essentially painting 5x5 pixels in a grid with some blur. You can just process the image with JS (or your programming language of choice) and generate the required CSS based on the position and colour of each pixel in the source image.
That is what I was thinking... probably a week to make the script and 5 minutes to make the image.
I made a script some time ago that makes exactly that,
it turns images into box-shadow,
that allowed me to have a custom header image in codepen
@@Laura69 I would love to have a go at it, can you share the link if it's a PR?
@@Laura69 thanks so much for responding!
@@PeterSedesse What?? That's way too high. A day at most for the script, up to a second for the image. Who spends a week on something so trivial
Yeah.....I still Google for "How to center a div in another div".... 😂😂
🎯
Simple, give parent div these: display flex, justify-content center, align-items center
@@Av-uv6xu Simple!
@@Av-uv6xu Thanks Av, I made a joke, well....kinda ;)
Don't remember things you can look up. No reason to use your brain for static info. (IMO)
The command * { outline: 1px solid red;} that you wrote to quickly inspect for objects in the first example itself was worth watching the video.
And your expressions for each example reflects your enthusiasm and love for CSS.
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
fun little javascript you can paste into the browser console and use it anywhere 🙂
const style = document.createElement('style');
style.innerHTML = '* {outline: solid 1px red;}';
document.head.appendChild(style);
@@justintefteller2780 Or simply add a new CSS rule in the developer tools.
I feel CSS is a skill, just like Painting
Exactly. I know how to paint, might not be able to paint well, but I can try
do some TailwindCss you gonna enjoy css after !
It's more like oil painting, or some other subcategory of that, meaning that CSS is the means but many methods and techniques are shared in that field as a whole.
I do graphics programming, using graphic APIs to produce nice looking graphics, or at least try. Graphics is totally different from painting, not drawing a parallel with painting, what I mean is that some stuff from graphics programming translates to CSS, specially when you get into the transforms and 3D stuff. So yes it involves an specific set of skills but some part of it at least falls into the same category as graphics programming in geral.
but a little tougher than average painting
It is
8:50 The mona lisa one is actually pretty easy, likely automated the process of generating the css by creating a script which iterates through blocks of pixels of the original image to get an average colour for each box shadow. Still pretty creative!
Some of those are amazing. I can't believe you can do all those animations with CSS only! Others have much more patience than I do.
Haha, same here. I think I'd get a good idea, work on it for 30 minutes, take a break, and totally forget about it, lol.
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
@@KevinPowell I want a job 😭
As a backend dev (that can do like the most basic of css, just enough to make a site look good) I find this amazing and i never knew what capability css really had. I wish i had a more design oriented brain so i could pull these off. But for now i'll stay on backend stuff :p
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
These are all amazing. Gotta love CSS and people's creativity.
I'm pretty sure that a script generated those 7000+ lines of box-shadow. (Not too hard to do that in js.)
Yeah, that makes sense!
I would agree. Still impressive
But not in C
It is, there is a css generator for images, remembered using it years ago
@@m5a1stuart83 C has nothing to do with js lol, but its still really easy in C.
char *str_cssHeader = ".monalisa {
";
char *str_cssFooter = "}";
size_t per_line_length = strlen("\tbox-shadow: 999px 999px 4px 5px #xxxxxx;
") * img_monaLisa.pixel_count;
char *str_buffer = malloc(sizeof(char) * (strlen(str_cssHeader) + strlen(str_cssFooter) + per_line_length + 3));
sprintf(str_buffer, str_cssHeader);
for(int i = 0; i < img_monaLisa.pixel_count; i++) {
int x_pos = mod(i, img_monaLisa.width);
int y_pos = (int)(i/img_monaLisa.width);
sprintf(
str_buffer, "%sbox-shadow: %ipx, %ipx, 4px, 5px, #%08x;
",
str_buffer,
x_pos,
y_pos,
img_monaLisa.pixels[i]
);
}
sprintf(str_buffer, str_cssFooter);
I have a very limited understanding of HTML/CSS (or any coding language for that matter) and this is insane. I didn't even realize the extent of artistry that goes into coding until now. Wow.
hey kevin, i am your subscriber since 2020..!! basically from lockdown in my country I have learnt many things from You, thank you Kevin. Love from Nepal
Coming from a yr 11 student who knows html and css pretty well. These are just next level the amouth to work gone into these stuff is crazy
I got back to 3D inspired by your previous reaction video - and I'm loving it! Not to mention I finally gathered the courage and started posting my ridiculously overconceptualized CSS-only 3D spheres on Codepen :D
codepen link? sounds cool!
I'm completely new as a web developer, and I'm blown away of what's possible with css. I thought that the absolute pinnacle of animated objects could only be achieved with the combination of script languages, but this is so cool.
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
Thank you for your comments!. Glad you like my animated cube slider. 3:40
I made a mario game too with divs css and js for controls ua-cam.com/video/JwZfHT2kbCs/v-deo.html
horrible
Awesome and so inspiring 😍 Trying simple examples is the best way to master complex CSS like these.
😨 Yess
Absolutely!
@CSS Tricks Your videos are awesome man! Huge fan😇
@@navod4745 ❤
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
I had a look at the source code for the still life and it looks like it was done completely by hand. it has comments documenting all the different elements and everything looks very intentional and not auto generated. out of this world patience
8:35 Mona Lisa is a 100*75 matrix of 5px*5px squares, each line is one 5px*5px square. I assume it was generated from an actual image by resizing to 100*75, then converting each pixel to one line of the box-shadow. The horizontal and vertical displacement are the pixel coordinates * 5, the spread is 5px for each and 4px blur ensures it looks smooth and dated. Pretty clever.
The 'mona lisa' one is pretty old-school, we used to do that via an ASCI converter. Also the 'trick' of offsetting layers to simulate 3D txt is also what we used to do back in 2000, in AfterFX, ( for Video ) when their 3D render software wasn't included yet... ( just layer it, and space over z-axis.... is still the quickest way for many animations I made recently )
mona lisa is not a question of patience, that's easily done with canvas js reading pixel information and then generating the css based on a template. it's even a short script to be fair.
1:54 It changes WHAT, Kevin? WHAT? We'll never know...
I never knew CSS could be that complex... Now I want to dive more into it
Div more*
The mona lisa one was def generated lmao
You are the king, then again some people are wizards.
@Śpioch maybe they just enjoy doing that ?
5:47 felt amazing to look at.
Even though the mona lisa with box shadows and 1 div is probably generated by a script, its still mind blowing what can be achieved with css alone. And only 1 div. I cant get over the whole 1 div thing lol.
1:55 I love how you didn't finish the phrases but we still understand everything!
i understood nothing but still cool :)
Pretty sure the project at 08:00 was automated with a Python script to read the according values and then print them in a CSS format, from the image inputs.
8:38 I think that was made using a script to write the css. Seems very scriptable
It would be crazy and stupid if that was written by hand. No way.
Some people are amazing, and then there's me. I can't even figure out most of the code in css battle
6:00 you can get rid of the JS by using a hidden checkbox, with the clickable thing being its label.
In CSS you'd check the :checked state.
Edit: like you mentioned in the video - leaving the details :)
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
Finally someone respecting the beauty of CSS.
This might be off topic but Kevin, you are the best !! Thank you for your amazing videos !
That last css.... it's physics has been misplaced. When the ball on the right end swings and hits other balls, the other balls are supposed to sway left, thereby creating momentum and swinging the ball on the left end to the top. But instead, if you look closely from @11:12 , the physics is working opposite i.e. they sway left when the ball on the left end hits them.
Switching the props will fix it.
But for just CSS, that's really awesome
Soon people are gonna manage back end with CSS
Now i know why i failed as a front-end dev
I learn a bit of html and css, and I thought I know how things work. Watch this video and freak out to realize I don't know anything. This is insane lol.
Dunning Kruger effect
lol and I still remember being amazed when Thierry Koblentz figured out dynamic video resizing.
I don't know anything about CSS or coding in general, but I've always been fascinated by people around me who can code. Being a very nerdy guy in high school, I naturally hanged with the computer crowd, which was wildly talented, and included most notably : a 15 years old who was a Dell tester and worked under the table building custom web servers, the most insane gamer who I've ever seen (WarLord in 2:40 min. at Reloading II on a Japanese server. You can't come up with this), another guy who went 4th at a major LoL competition even tho his teammate left (WTF)... and me. I was never even close to be that good - or passionated - by computers, but I still love them. I think I should learn CSS :)
That last one was truly amazing
I’ve been waiting to see the continuation of this series. The pens you feature are incredible, but your work continues to impress me time and time again. Thanks!
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
I think monalisa is generated by some Image to CSS APIs. Who'll write 7000+ lines with nothing but box-shadows!
Dear Kevin, thank you for sharing and sharing the Code-pens!
So inspiring all these examples. The glass was one of my favorites !
2:33 is it me or is this looping animation an illusion that makes it look like there are less and less particles over time
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)
I like this channel a lot its like were all learning togethor and we get a window into your thoughts. Very great videos it helps me realize how I should be framing my mindset as I code
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
Hi ! I'm proud to be on this list (I'm the first one) :) !
Wow
Im sure even the creators of CSS are amazed by what people can do with it !
i hope no one is assuming that the box shadows mona lisa at 8:50 is not generated, come on now…
That 3d hover effect is similar to the active effect on the tiles from windows 10 action panel (quick actions).
And the glitch from the card rotation is because (my guess) when your mouse is over the edge of the card it starts rotating and then the card gets out of hover and tries to go back to it's base position.
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
I'm amazed at the neat stuff you can do with CSS, when meanwhile you can't even do really basic stuff like letterbox a div of one aspect ratio in a div of another aspect ratio.
Back in the day, there existed something called a "demoscene". This reminds me of the demoscene.
Those are all amazing and I'm just here like, "CSS had a loop???"
it is hard to believe what computers are capable of, both good and bad, but on just the good, CSS has matured into something all together different!
I am just starting hmtl and this is impressive and terrifying lol. I have a long ways to go, but those are some talented people.
Ur videos motivates people to learn coding
As a full-stack developer who also dabbles in CSS out of necessity, I find the practical CSS tricks that can be applied to UI design far more useful than the arty-farty transforms and animations. But this was cool all the same. That sounded a lot more negative than I meant. What I'm trying (very poorly) to say is that I appreciate your normal videos Kevin, so please don't feel inadequate because you feel you can't compete with the arty stuff, I prefer your content anyway.
yeah I completely agree with UI/UX being the most important priority, but animations on websites are still cool though (if you don't overdo it atleast)
The arty farty stuff is how you practice your craft and get better as a front end developer. Some backend devs will try to build a framework or service just for fun. It's the same thing.
@@ValentinRad exactly
I think these artsy works are really useful not because they conform to UX standards but shed a light to depth of CSS in broadening our perspective.
@Śpioch in most cases, crazy animations like this don't belong in Web development as Google will have a field day on core web vitals.
Solid, simple foundational understanding of each framework and language is best. Although it's definitely cool and nice to have these skills, they're not very practical.
These are all amazing! I must brush up my css
First time seeing this guy and omg ima binge watch
I did the first project in the video with js using mouse position, event.clientX clientY and boundingClientRect() ... I never thought this could be done only with css. It's just amazing
“That shadow isnt easy to be done at all” all of em doesnt look easy to me for css only :’), im still freakin amazed at every single of them tho like bruh how
wow those css animations are awesome
*Mona Lisa made with box shadows.*
Firefox: "I'm in danger!"
I wonder what those guys are doing for their livings. Possibly CSS Zen masters or sth?
They are so much satisfying to watch .
Me : I don't have any bug in my code since 5 years
My friend : Which language?
Me : HTML
Amit Sheen's project was fire
I like this - 3D step counter card by Steve Gardner
Mr Powell thank you for share your knowledge you have so much possitive energy to teach that at the end of each tutorial I want to learn more CSS !
Best Regards From Colombia !
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
I'm just starting my adventure in Computer language. Taking CSS and HTML classes. And this is blowing my mind!!
For the longest time, I couldn't figure out why Kevin's voice sounded so familiar, but I finally figured it out:
Kevin sounds like the unmodulated version of Stephen Hawking's computer voice.
Wow! Insane :) thanks for sharing Kevin!
so, i'm not a front-end developer, but for me it looks amazing
You're awesome! this reminds me of trueSpace 1 - can't believe how far HTML has come. Thanks for sharing.
Hey pls could you get evaluation
ua-cam.com/video/QkEl_frEZXo/v-deo.html
What song is playing on 3:05 ?????
* Turing complete: * check
Amazing
You are right he is very amazing
I love the CSS write up
I believe CSS will help devs go a long way cause there are so many hidden features in it
I’m a novice in all this
Can any one walk me through this or do i have to start with HTML
Yeah...!!! You tell right.. 👍👍 yr... ❤️❤️❤️ As same reaction also I had... As a Front End Developer ❤️❤️🔥🔥
CSS may not be Turing Complete, but at least Newton seems pretty happy with it.
There is a guy who programmed a quake game to run in Excel...
some people's skills are just nuts.
5:50 Gardner's project could have been made with css only by replacing the click event with a hover effect for the same result.
Gorgeous projects
What's the background music? Spotify playlist.. the song at 7:20 specifically.
*Me* : would be amazed to draw a single stick man in CSS...
*In the meantime on Codepen* : 🧠💥
How lonely are you?
Developers doing such stuff: yes!
And now, I'm taking CSS off of my resume.
I wish I didn't have to work so I could spend all my time creating stuff like this. Back in my day, the challenge was to make cool custom animations for the Winamp visualizer.
Amazingly beautiful CSS creations looking forward to being on that level.
At 8:50 there is no way he wrote that by hand, seems pretty easy to generate
I fell in love with HTML simply by hitting the F 12 key on someone’s Windows computer “I’m an OS X user“ from there I decided I wanted to code! Overwhelmed with all the resources out there and then people telling me I should start with Python or Java or Rust, eventually sadly“recently” I decided I’m gonna stick with HTML and CSS I’d like the fact that I can see the results immediately! I’ll choose a program language eventually!
That last one killed me, damn.
Wow..... you selected all the elements and gave a 1px solid red outline to show that they have used several cells in that css only hover code pen.... Had I came across this codepen I would never get an idea to quickly give an outline to all the elements and check.... I'm gonna add these types of techniques to my arsenal so they can help me when I am debugging my own css.... This is one of those things where someone else might think trivial but I find useful.... 😊
I always watch anything you talk or do with css and along with those big stuff I learn from you, I learn these little things as well....
these developer are creating awesome art work using CSS while i am still struggling to align a div to center and relying for code on stackoverflow
I once was like this man. I am still like this man, actually.
Meanwhile on stackoverflow: how do I fix my float?
That still life was stunning.
this is so wholesome
Monalisa CSS generated using Color detection of image ! Cool one
Insane how you can animate with css!!!!