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 AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay