search

cyanharlow / purecss-francine

HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS.
7.74k stars 511 forks source link

What is your process for doing this? #28

Open keithn opened 6 years ago

keithn commented 6 years ago

Really interested to know how you structure putting this kind of thing together. Do you have a write up on how you approach this?

I'm finding it interesting going through with developer tools turning the styles on and off to see what you are doing. But seems daunting to think how you'd plan all of this!

How many hours did it take to put together?

Either way, Super cool

cyanharlow commented 6 years ago

Hah, I really have no idea how many hours it took - it takes a few weeks to put the pieces together and then I update it every week for months (or until the day I die, because I'll always find something that needs fixing about it).

I'll have a general idea of what I want to do beforehand, and I start by typing/building out the components I know I'll need for sure: head, face, eyes, nose, body, leftarm, rightarm, etc. Style-wise, that gets typed out in the LESS file - for kicks I usually try to see how much I can build out without looking first - then I tweak it with the browser dev tools.

Somewhere along the way I'll run out of DOM nodes and then see how far I can get with pseudoelements before finally giving in and adding a few new elements to the file.

It's definitely not a quick process, but that's part of the appeal. It can be kind of relaxingly zen.

keithn commented 6 years ago

thanks for explaining!

<---- very impressed.