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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

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

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay