DEV Community

Chris Jarvis
Chris Jarvis

Posted on • Edited on

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay