DEV Community

Cover image for CSS Halloween: Eyes See You.
Chris Jarvis
Chris Jarvis

Posted on

5

CSS Halloween: Eyes See You.

I made some spooky Halloween eyes using CSS.

I started out similar to other posts with an outer frame around a centered subject. You can see the frame in B2EMO and the Halloween House Party. In this project I removed the border so you don't see the frame just the subjects which are the eyes.

<div class="flex-container">
<div class="main">
    <div class="outer_frame">
          <div class="subject">
            <div class="eyeball">
          </div>
         </div>
          <div class="subject">
            <div class="eyeball">
          </div>
         </div>
</div>
</div>
Enter fullscreen mode Exit fullscreen mode

.flex-container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background: var(--Black);
  justify-content: center;
  align-items: center; 
  position: relative;
}


.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.outer_frame {
  width: 900px;
  height: 600px; 
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: row;
  background-color: #18321f;
}


.subject {
    display: flex;
    justify-content: center;
    overflow: visible;
    flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

Eyes are spheres

The eyeballs start out as black squares with border-radius: 50% which turns the squares to circles. Inside the eyeballs are eyecolor and inside those are pupils. All are squares shaped into circles.

To give them a 3d effect drop-shadows and box shadows are added.

        <div class="subject">
            <div class="eyeball">

                <div class="eyecolor">
                    <div class="pupil">
                </div>
                </div>
            </div>
        </div>

        <div class="subject">
            <div class="eyeball">

                <div class="eyecolor">
                    <div class="pupil">
                </div>
                </div>
            </div>
        </div>
Enter fullscreen mode Exit fullscreen mode
.eyeball {
  height: 275px;
  width: 275px;
  border-radius: 50%;
  background-color: var(--Black);

  display: flex;
  justify-content: center;
  overflow: hidden;

  filter: drop-shadow(0 0 0.75rem black);
  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
}
Enter fullscreen mode Exit fullscreen mode

two eyes

.eyecolor {
  height: 175px;
  width: 175px;
  border-radius: 50%;
  margin-top: 44px; 
  background-color: #103c21;
  justify-content: center;
  overflow: hidden;

  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);

  filter: drop-shadow(0 0 1.5rem white);

  background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
  background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);  
  background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
 background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}

Enter fullscreen mode Exit fullscreen mode

The box-shadow: inset -25px -25px 40px rgba(0,0,0,.5) added to give an edge to the eye color this helps the 3d effect. But adding a linear-gradient makes them pop off the screen. It added some highlighting.

two eyes on a green background.

Review

This was fun. I wanted to make something with more depth than previous art projects. I played around with spheres till I figured I could make some spooky eyes.

Have you ever made CSS art? Share links in the comments.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Follow me here and on twitter.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay