Front-end dev reacts to amazing CSS-only Codepens
HTML-код
- Опубликовано: 7 июл 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 RUclips 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
ruclips.net/video/QkEl_frEZXo/видео.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'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);
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
ruclips.net/video/QkEl_frEZXo/видео.html
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!
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
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
ruclips.net/video/QkEl_frEZXo/видео.html
@@KevinPowell I want a job 😭
These are all amazing. Gotta love CSS and people's creativity.
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
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
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.
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!
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
ruclips.net/video/QkEl_frEZXo/видео.html
This might be off topic but Kevin, you are the best !! Thank you for your amazing videos !
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 ruclips.net/video/JwZfHT2kbCs/видео.html
horrible
So inspiring all these examples. The glass was one of my favorites !
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
ruclips.net/video/QkEl_frEZXo/видео.html
They are so much satisfying to watch .
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
ruclips.net/video/QkEl_frEZXo/видео.html
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 )
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
These are all amazing! I must brush up my css
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
ruclips.net/video/QkEl_frEZXo/видео.html
I never knew CSS could be that complex... Now I want to dive more into it
Div more*
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
ruclips.net/video/QkEl_frEZXo/видео.html
Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)
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!
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
First time seeing this guy and omg ima binge watch
Wow! Insane :) thanks for sharing Kevin!
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
ruclips.net/video/QkEl_frEZXo/видео.html
wow those css animations are awesome
this is so wholesome
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.
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.
That still life was stunning.
Ur videos motivates people to learn coding
Now i know why i failed as a front-end dev
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.
You are the king, then again some people are wizards.
@Śpioch maybe they just enjoy doing that ?
lol and I still remember being amazed when Thierry Koblentz figured out dynamic video resizing.
Im sure even the creators of CSS are amazed by what people can do with it !
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.
Wow this video is really really cool
1:55 I love how you didn't finish the phrases but we still understand everything!
i understood nothing but still cool :)
Quite interesting findings :)
Amazingly beautiful CSS creations looking forward to being on that level.
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.
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.
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
ruclips.net/video/QkEl_frEZXo/видео.html
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.
Really really cool
These are so awesome 😍
Meanwhile on stackoverflow: how do I fix my float?
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.
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???"
Awesome ❣️
CRAAAAZY KEVIN POWELL!
VERY NICE!
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 :)
I think monalisa is generated by some Image to CSS APIs. Who'll write 7000+ lines with nothing but box-shadows!
Amit Sheen's project was fire
Finally someone respecting the beauty of CSS.
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
Godlike skill level 😅😅
Dayum, I didn't know that was possible with pure css. 😮
5:47 felt amazing to look at.
Yeah...!!! You tell right.. 👍👍 yr... ❤️❤️❤️ As same reaction also I had... As a Front End Developer ❤️❤️🔥🔥
That last one killed me, damn.
Wow that's wild 👀🍿
*Mona Lisa made with box shadows.*
Firefox: "I'm in danger!"
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'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.
its briliant!
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
I once was like this man. I am still like this man, actually.
I'm just starting my adventure in Computer language. Taking CSS and HTML classes. And this is blowing my mind!!
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 like this - 3D step counter card by Steve Gardner
Thank´s ;)
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
ruclips.net/video/QkEl_frEZXo/видео.html
4th, Your Content is amazing kevin!!
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....
Excellent i really love thé simple Idea of your video, just bé curious
Monalisa CSS generated using Color detection of image ! Cool one
1:54 It changes WHAT, Kevin? WHAT? We'll never know...
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
Fantastic
Insane how you can animate with css!!!!
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
I wonder what those guys are doing for their livings. Possibly CSS Zen masters or sth?
The mona lisa one was def generated lmao
I like how people just do this
can't due this crazy stuff even with the js lolo
Soon people are gonna manage back end with CSS
hover!
got my heart ayyy