Diana Smith is an artist who paints detailed portraits and illustrations using only HTML and CSS.
Commenters call her pure CSS artwork worthwhile and a standout example, though some note pieces render incorrectly in certain Chrome versions.
I have a question about web design from a complete idiot: how do you do it? I mean, really, from scratch, how is it done?
I have heard that people used to design in a graphics program (Photoshop, Gimp) what the website should look like and then tried to translate that to CSS, html, and js, or maybe just to React these days. Is that how it's done?
Right now when I want something to look a particular way, I go into a CSS file, guess at what a good value might be for a colour or a size or a font, reload the page in the browser, see how it looks, and iterate a few times. Sometimes I use the web browser's webdev tools to try to see the changes in these numbers a bit more live.
What is it that people actually do? How do you even begin to do something as crazy as CSS painting?
http://diana-adrianne.com/purecss-vignes/
I would love to see an intro to web design that starts like those intros to programming that begin with, this is how you install a text editor, this is how you use git, a programming language has variables and functions, and so forth, e.g.
http://swcarpentry.github.io/python-novice-inflammation/setup/
There are more at the website. All very impressive!
https://diana-adrianne.com/
https://cyanharlow.github.io/purecss-zigario/
https://cyanharlow.github.io/purecss-vignes/
https://cyanharlow.github.io/purecss-francine/
Previous discussions
https://news.ycombinator.com/from?site=diana-adrianne.com
Some of them do not render correctly on
Chrome Version 80.0.3987.122 for Win10 either.
Same type of scary ovals.
Still a fantastic job!
Reminds me of another exercise in CSS: https://diana-adrianne.com/purecss-francine/
There's also someone who does incredible artwork using only hand-written CSS:
http://diana-adrianne.com/purecss-francine/
How it works:
http://diana-adrianne.com/how/
Not exactly what you are asking for, but she does provide more information on the 5 key properties: https://diana-adrianne.com/how/
You can go pretty darn far with CSS if you are ok with multiple divs...
https://diana-adrianne.com/purecss-francine/