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