So far I have made aliens, ghouls, and skulls with CSS. What else could I make for Halloween? How about a Jack O'Lantern?
I started by changing the background color to orange to match a pumpkin.
.minifig_face {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff9800; 
    flex-direction: column;
    border: 4px solid black;
}
Next I changed the size of the eyes. I made them longer and oval shaped. I changed the border style from solid to double to make look carved into the pumpkin shell. Finally I changed the background color to look like the interior of a pumpkin.
Then used the eye shape for the mouth and decided to just drop the nose altogether.
.eyes {
    height: 195px;
    width: 145px;
    background: #FFF8E1;
    border-radius: 100%;
    border: double 4px black;
    margin:-10px 10px 0px 10px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
I have a Jack O'Lantern. But quickly changing the colors and removing the pupils and border from the eyes. gives me a Howling Ghost.
A gallery of other CSS creations.
Ghoul
Alien
    background-image: url(fish-net.png), radial-gradient(rgba(255, 204, 0, 0.01), rgb(253, 245, 192)); 
This branched off Cody Pearce's Bender in CSS post.
Have you ever made something cool with CSS? Share it.
-$JarvisScript git push
 








 
    
Top comments (0)