DEV Community

Chris Jarvis
Chris Jarvis

Posted on • Edited on

1

CSS Halloween Faces: Pumpkin

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;
}

Enter fullscreen mode Exit fullscreen mode

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.

Jack o Lantern

.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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Howling ghost white with large oval eyes and mouth.

A gallery of other CSS creations.

Skull
Alt Text

Ghoul

Alt Text

Alien

Green alien face. Alien has large round eyes with thin black pupils.

Alien with scales
snake skin alien

    background-image: url(fish-net.png), radial-gradient(rgba(255, 204, 0, 0.01), rgb(253, 245, 192)); 
Enter fullscreen mode Exit fullscreen mode

This branched off Cody Pearce's Bender in CSS post.

Have you ever made something cool with CSS? Share it.

-$JarvisScript git push

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 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