DEV Community

Chris Jarvis
Chris Jarvis Subscriber

Posted on • Edited on

CSS Halloween Faces: Alien WIP

#css #wip

Here's an alien made using CSS and HTML. This branched off Cody Pearce's Bender in CSS post. I followed his tutorial and made Bender them made a some LEGO minifig faces. I decided since it's Halloween why not make some creatures here's my first an Alien. It is a work in progress. I figured if I share it will motivate me to continue.

Green alien face. Alien has large round eyes with thin black pupils.

Here's the code for the eyes.

HTML

 <div class="eyes_pair"> <div class="eye_socket"> <div class="eyes"> <div class="catchlight"> <div class="pupil"></div> </div> </div> <div class="eyes"> <div class="catchlight"> <div class="pupil"></div> </div> </div> </div> </div>
Enter fullscreen mode Exit fullscreen mode

CSS

 .eyes_pair { width: 400px; height: 150px; position: relative; display: flex; justify-content: center; align-items: center; } .eye_socket { width: 375px; height: 125px; display: flex; justify-content: center; } .eyes { height: 145px; width: 145px; background: white; border-radius: 100%; border: solid 4px black; margin:-10px 10px 0px 10px; display: flex; justify-content: center; position: relative; } .pupil { width: 5px; height: 100px; margin-top: 5px; background: black; border-radius: 100%; display: flex; justify-content: center; position: relative; }
Enter fullscreen mode Exit fullscreen mode

A slightly different version where I added a color gradient as a backrground-image to the skin. I trying to see if I can add some scales.

Alt Text

Have you ever made something cool with CSS? Share it.

-$JarvisScript git push

Top comments (0)