DEV Community

Cover image for CSS Halloween Faces: Ghoul
Chris Jarvis
Chris Jarvis

Posted on • Edited on

1

CSS Halloween Faces: Ghoul

Here is a Ghoul I made while I was trying to build a skull.

Ghoul with pale skin red eyes and share teeth.

The eyes are similar to the ones from my earlier alien post. I just made the pupils and catchlights circular. By making height and width equal creating a square then adding a border-radius: 100%.

HTML

    <div class="minifig_face">
    <div class="eyes_pair">
        <div class="eye_socket">
            <div class="eyes">          
                <div class="pupil">
                    <div class="catchlight"></div>
                </div>
            </div>
            <div class="eyes">
                <div class="pupil">
                    <div class="catchlight">
                </div>
            </div>
            </div>
        </div>              
    </div>

Enter fullscreen mode Exit fullscreen mode

CSS

.pupil {
    width: 50px;
    height: 50px;
    margin-top: 50px;
    background: red;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.catchlight {
    width: 4px;
    height: 4px;
    margin-top: 25px;
    background: rgb(26 23 23);
    border-radius: 100%;
    display: flex;
    justify-content: center;
} 
Enter fullscreen mode Exit fullscreen mode

The mouth is the same oval shape as the alien. I made the fangs long but used overflow: hidden to hide the roots of the teeth.

.mouth {
    width: 200px;
    height: 80px;
    background: rgb(51 51 51);
    margin-top: 90px;
    border-radius: 100px;
    border: 4px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.fangs {
    width: 5px;
    height: 65px;
    margin-top: -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black; 
}

.fangs_bottom {
    width: 7px;
    height: 100px;
    margin-bottom:  -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black;
}


Enter fullscreen mode Exit fullscreen mode

I added a nose by making a rectangle out of borders and making the color of the sides transparent but the bottom a solid color.

.nose_pair {

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftNostril {
    border-left: 30px solid transparent;
      border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
    display: inline-block;
    margin-bottom: -70px;
}

.bridge {
    width: 2px;
    height: 22px;
}

.rightNostril {
    border-right: 30px solid transparent; 
    border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
    display: inline-block;
    margin-bottom: -70px;
}

Enter fullscreen mode Exit fullscreen mode

Inspired by Cody Pearce's Bender in CSS post.

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

Next Time: The Skull

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

-$JarvisScript git push

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

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