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)