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