Animated Vampire Lady

#frontendchallenge #devchallenge #css #webdev

Frontend Challenge CSS Art Submission 🦇🎃

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

I wanted to do something out of the ordinary.

I recalled seeing a lady that does realistic portraits with CSS. As an artist, this lights a small fire of curiousity.

I set the bar fairly high for myself.

I had an original plan that I sketched up when I saw this DEV challenege go live. Here was my initial thought:

initial sketch — Sketches help me think about what I might have to do in order to accomplish this. Perhaps a self portrait of sorts? XD

Demo

Journey

I really liked the idea of a vampire lady, so I rolled with it. I started by getting major areas laid out like so:

After this initial phase of blocking out areas, I was able to start thinking more about details.

I built out this project using the css property position: absolute; for most of this. It is a favorite of mine as it gives me complete control of object position. But she's not fancy enough yet. Let's continue!

What's a vampire lady without some blood of course? I added some blood drips and a quick animation for interest. It was shortly after this point I added her blinking as well. I used keyframes to control eyelid size to create the "blink" effect. It's fairly straightforward.

But she was still missing something. I didn't want her just to be a floating head. I wanted her deliberately positioned. Through a grapevine of ideas and trashed code, I got this idea of her peaking through castle window. But how am I gonna make bricks? Making bricks from scratch was a challenege for me. I ended up using grid and offsetting alternating rows with margin. I easily spent hours fighting with grid. I can't tell you how excited I was when I got my wall to look sort of how I wanted! XD Major win.

Added castle wall — It's still missing something

After poking around with ideas of spider webs and candles, I realized it might be cool if I mess around with my pain-in-the-butt brick wall, removed some bricks, and placed evil peering eyes in the holes. What a great, finishing touch I thought. It didn't take me too terribly long to locate the exact bricks I wanted to "remove". I simply added a visibility: hidden; property to my bricks of choice. (And a slight hair of some additional tweaking...) But I got the desired effect. I really like this blinking situation, so I modified it and reused it again. Can't have them blinking in unison. Has to be "organic" haha.

I also removed the bow in her hair and spent some time making a dramatic rose. Much more gothic and vampire-like!

Thank you for looking at my CSS art. I learn something new everytime I mess with CSS. I am excited by the blinking effect, my crazy brick wall, and the shading on the face I was able to accomplish with shapes and gradients.