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
Top comments (0)