CSS Face

twitter logo ・1 min read

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 (😭).

twitter logo DISCUSS (7)
markdown guide
 

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 😁

 

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.

 

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

🤣

 
 

Thank you. The misfits are the best part, you should see IE. 😃

 

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

 

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. 😭

Classic DEV Post from Aug 8 '18

Using Python and C together

How to use Python and C in the same project

Vuild profile image
1:01 Msg if you want to be followed. 👍