Yeah.....I still Google for "How to center a div in another div".... 😂😂
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.
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
I feel CSS is a skill, just like Painting
I'm pretty sure that a script generated those 7000+ lines of box-shadow. (Not too hard to do that in js.)
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 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'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.
Thank you for your comments!. Glad you like my animated cube slider. 3:40
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
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.
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.
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
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
The mona lisa one was def generated lmao
Awesome and so inspiring 😍 Trying simple examples is the best way to master complex CSS like these.
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.
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.
@TheNeonRaven