DEV Community

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

Posted on • Edited on

3

CSS Halloween Faces: Skull

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

The Skull and the Ghoul.

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

Alt Text

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

-$JarvisScript git push

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay