Front-end dev reacts to amazing CSS-only Codepens

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!


🔗 Links
#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[TheNeonRaven]

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.

[theferalmaker]

still Google for "How to center a div in another div".... 😂😂

[ajjo]

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.

[peckozzz]

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

[manhalrahman]

I feel CSS is a skill, just like Painting

[hopsta]

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.

[Primu]

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!

[coderapy]

Awesome and so inspiring 😍 Trying simple examples is the best way to master complex CSS like these.

[balazsgyekiczki]

I'm pretty sure that a script generated those 7000+ lines of box-shadow. (Not too hard to do that in js.)

[grojgrover]

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.

[hitbox]

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.

[MrGreed]

Your content is soooo good ! I’m glad I found you, you’ve inspired me to dive more into css.

[coopermarino]

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

[ViciousViscount]

These are all amazing. Gotta love CSS and people's creativity.

[raghavdahal]

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

[AlbertoHartzet]

Thank you for your comments!. Glad you like my animated cube slider. 3:40

[Poto]

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

[denno]

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

[casplant]

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 )

[kiritsuna]

I never knew CSS could be that complex... Now I want to dive more into it