Last time I showed a Ghoul I made with CSS. It was originally planned as a skull but the more it evolved, it turned toward a Ghoul. I still wanted a skull. I started to search for LEGO skull image only to realize I was wearing a skull and cross bones tee.

I decided I had to change the mouth to get a better skull. The Ghoul mouth was too open and the fangs looked like needles. So The mouth was collapsed to just a line and the teeth were made wider and shorter. overflow was changed to visible. So the teeth poked above and below the mouth line.

.mouth {
    width: 140px;
    height: 10px;
    background: rgb(26 23 23);
    margin-top: 90px;
    border: 4px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    overflow: visible;
}

.fangs {
    width: 10px;
    height: 30px;
    background:rgb(26 23 23);
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.fangs_bottom {
    width: 10px;
    height: 40px;
    background: rgb(26 23 23);;
    display: flex;
    justify-content: center;
    position: relative; 
} 

Next I changed the background-color of the nose and mouth to match the eyes. Also changed the page background-color to a darker color makes the bone pops off the screen more but without the too sharp contrast of #000 and #fff.

I removed the bridge between the nostrils and shortened the nose over all. I could combine the nostrils into one triangle but like the ability to have separate nostrils.

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

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


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

The Skull and the Ghoul.

I continued to work on building a CSS Skull.
the next step was to remove the bridge from the nose and shorten the nostrils.

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

-$JarvisScript git push