Name: CSS Halloween Faces: Alien WIP
Rating: 3.4 (9141 reviews)
Author: jarvisscript

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.

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>

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;
}

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.

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

-$JarvisScript git push