CSS Halloween Faces: Ghoul

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

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>

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

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

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

Inspired by Cody Pearce's Bender in CSS post.

Next Time: The Skull

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

-$JarvisScript git push

Blog

CSS Halloween Faces: Ghoul

Chris Jarvis

Join Our Newsletter. No Spam, Only the good stuff.

Related