DEV Community

Cover image for CSS Face
Vuild
Vuild

Posted on

CSS Face

Animated customizable 3D HTML & CSS face illustration using grid, variables, blur, border radius, nth child, box shadows. No SVG, PNG, JPG.

https://vuild.com/face Details

https://vuild.com/code-face Post

https://vuild.com/css-face/ Code

https://vuild.com/bloopers Bloopers

V1. Best viewed in Safari. Or IE (😭).

Top comments (7)

Collapse
 
theringleman profile image
Sam Ringleman

What can be accomplished with a language that is as misunderstood as CSS blows my mind. Amazing work.

I would love to know how long this took you.

I saw the iterations (bloopers) and each one, albeit funny, still conveys the amount of time you put into this.

Curious if you have taken a peak at this diana-adrianne.com/purecss-francine/ ? Sorry it's not in markdown, I'm on my phone and will edit later 😁

Collapse
 
vuild profile image
Vuild • Edited

Thanks. It didn't take that long (low xx hrs maybe) because it is just an iteration of

vuild.com/july-4 (same egg shape even).
vuild.com/batman/
vuild.com/history-css-art more info
vuild.com/game-watch/ was the one that took me ages (resize).

Francine is very impressive. I think the current 'standard' is this:

twitter.com/ivorjetski/status/1139...

from @ivorjetski who spends months. Look at the detail.

I am not really making art, I am browser testing mostly so the techniques/outcomes are different. Diana & Ben are making art.

Collapse
 
vuild profile image
Vuild

Oh & the bloopers? They're fake mostly. Based on people I know...of.

🀣

Collapse
 
michaeltharrington profile image
Michael Tharrington

Haha! I especially ❀️ the bloopers.

Collapse
 
vuild profile image
Vuild

Thank you. The misfits are the best part, you should see IE. πŸ˜ƒ

Collapse
 
ivorjetski profile image
Ben Evans

Very cool! I was just thinking of animating mine! Looks like you beat me too it!

Collapse
 
vuild profile image
Vuild

Thanks.

I had to. Once yours was done my faces are a waste of time. When I made the first one in 2012 I imagined someone else making a realistic one, not me. You fully pulled it off. I was laughing hard when I saw you tackling mouth-teeth-hair. 😭