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>

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

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>

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

.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%);
}

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.

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

Follow me here and on twitter.