Front-end dev reacts to amazing CSS-only Codepens
Vložit
- čas přidán 7. 07. 2021
- 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/onediv/pen/BprVzp
✅ Free Radicals by Noah Blon - codepen.io/noahblon/pen/wEfCz
✅ Animated cube slider by Alberto Hartzet - codepen.io/hrtzt/pen/JdYaEZ
✅ Pure CSS Playing Card by Ben Evans - codepen.io/ivorjetski/pen/Exa...
✅ 3D step counter card by Steve Gardner - codepen.io/ste-vg/pen/wdBRZN
✅ Pure CSS Still Life by Ben Evans - codepen.io/ivorjetski/pen/xMJoYO
✅ Mona Lisa with pure CSS by Jay Salvat - codepen.io/jaysalvat/pen/HaqBf
✅ 3D CSS Typography by Noah Blon - codepen.io/noahblon/pen/CsxfH
✅ Newton's Cradle by Amit Sheen: codepen.io/amit_sheen/pen/XWM...
✅ 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.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
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
czcams.com/video/QkEl_frEZXo/video.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.
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!
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
czcams.com/video/QkEl_frEZXo/video.html
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);
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
czcams.com/video/QkEl_frEZXo/video.html
@@KevinPowell I want a job 😭
These are all amazing. Gotta love CSS and people's creativity.
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
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
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!
Your content is soooo good ! I’m glad I found you, you’ve inspired me to dive more into css.
or rather, "div" more into css...
i'll see myself out
i hate you 2 years into the future@@Headshotnoby
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
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
czcams.com/video/QkEl_frEZXo/video.html
This might be off topic but Kevin, you are the best !! Thank you for your amazing videos !
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
czcams.com/video/QkEl_frEZXo/video.html
So inspiring all these examples. The glass was one of my favorites !
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 czcams.com/video/JwZfHT2kbCs/video.html
horrible
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 )
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
czcams.com/video/QkEl_frEZXo/video.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
Dear Kevin, thank you for sharing and sharing the Code-pens!
I learned html and css a while ago. Took a long mental break to forget it. Started learning java for about a week. Im back to the basics of html and css. This was inspiring in a way. Thank you.
These are all amazing! I must brush up my css
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
czcams.com/video/QkEl_frEZXo/video.html
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
czcams.com/video/QkEl_frEZXo/video.html
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
czcams.com/video/QkEl_frEZXo/video.html
They are so much satisfying to watch .
Wow! Insane :) thanks for sharing Kevin!
I never knew CSS could be that complex... Now I want to dive more into it
Div more*
Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)
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.
Amazingly beautiful CSS creations looking forward to being on that level.
First time seeing this guy and omg ima binge watch
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.
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.
Some people are amazing, and then there's me. I can't even figure out most of the code in css battle
That last one was truly amazing
Im sure even the creators of CSS are amazed by what people can do with it !
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:55 I love how you didn't finish the phrases but we still understand everything!
i understood nothing but still cool :)
wow those css animations are awesome
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 still life was stunning.
You are the king, then again some people are wizards.
@Śpioch maybe they just enjoy doing that ?
Gorgeous projects
5:47 felt amazing to look at.
Those are all amazing and I'm just here like, "CSS had a loop???"
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.
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.
Dayum, I didn't know that was possible with pure css. 😮
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.
Ur videos motivates people to learn coding
*Mona Lisa made with box shadows.*
Firefox: "I'm in danger!"
Finally someone respecting the beauty of CSS.
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!
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
czcams.com/video/QkEl_frEZXo/video.html
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
Back in the day, there existed something called a "demoscene". This reminds me of the demoscene.
I'm just starting my adventure in Computer language. Taking CSS and HTML classes. And this is blowing my mind!!
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....
Yeah...!!! You tell right.. 👍👍 yr... ❤️❤️❤️ As same reaction also I had... As a Front End Developer ❤️❤️🔥🔥
Now i know why i failed as a front-end dev
I think monalisa is generated by some Image to CSS APIs. Who'll write 7000+ lines with nothing but box-shadows!
this is so wholesome
1:54 It changes WHAT, Kevin? WHAT? We'll never know...
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.
Awesome ❣️
That last one killed me, damn.
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
czcams.com/video/QkEl_frEZXo/video.html
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.
I like this - 3D step counter card by Steve Gardner
I think the pen with Mona Lisa is most likely Auto Generated code. I believe there is 1 box shadow for each pixel. There is probably some program or website out there that allows you to create css from image like that or maybe he created the generator himself. I dont think anyone would ever write it manually ^^ But yeah, its still cool to see. But i have actually seen that one before. But still very impressive work
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
Quite interesting findings :)
I once was like this man. I am still like this man, actually.
How lonely are you?
Developers doing such stuff: yes!
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
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
That mona code is sick. It's some ravetype product got to be lol
Wow this video is really really cool
CRAAAAZY KEVIN POWELL!
There is a guy who programmed a quake game to run in Excel...
some people's skills are just nuts.
Looking all those codepen amazing work ,I feel I like I fit nowhere !! Sad:)
Meanwhile on stackoverflow: how do I fix my float?
I wonder what those guys are doing for their livings. Possibly CSS Zen masters or sth?
Amit Sheen's project was fire
Monalisa CSS generated using Color detection of image ! Cool one
“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
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
czcams.com/video/QkEl_frEZXo/video.html
Soon people are gonna manage back end with CSS
4th, Your Content is amazing kevin!!
Wow that's wild 👀🍿
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.
The mona lisa one was def generated lmao
Excellent i really love thé simple Idea of your video, just bé curious
Hi kevin I really love your content and the way you speak. Kind of super humble. Btw do have any video of how to deliver website to a client. Hope you will answer me. Thank you
And now, I'm taking CSS off of my resume.