DEV Community

Chris Jarvis
Chris Jarvis

Posted on • Edited on

4 2

CSS Halloween Faces: Alien 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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay