CSS Halloween: Screen Time

It's the season, not just HacktoberFest but Halloween! So let's sit back and watch some scary shows on an old TV.

Spooky Vision

Similar to my ugly sweater series, I made a frame to help display a subject. Click to see how the sweater was made. This time the frame is a vintage TV set. The subject is a Halloween creature.

I placed a subject div in that Screen Frame div. Inside the character div is a div for a specific character for this post it has a class of ghost_body.

The TV

 <div class="main">
  <div class="screen_frame">
        <div class="subject">
            <div class="ghost_body"></div>
        </div>
  </div>
</div>

Outside the Screen div is the panel with the television dials.

<panel>
    <div class="box"><dial></dial></div>
    <div class="box"><dial></dial></div>
</panel>

Ghosts

The Ghosts themselves are just a few basic shapes. The body, eyes, and mouth are ovals. To make ovals in CSS add border-radius to a rectangle.

I used the eyes class to make oval eyes. For the mouth I reused the eyes class but made the oval larger by expanding width and height.

<div class="ghost_body">
    <div class="eyeRow">
        <div class="eyes"></div>
        <div class="eyes"></div>
    </div>

   <div class="eyes mouth"></div>
</div>

.eyes {
  width: 20px;
  height: 30px;
  border-radius: 44%;
  background: var(--Black);
}

.mouth {
  width:  35px;
  height: 90px;
}

This is a work in progress. I would like to add some texture to the TV cabinet and maybe the screen. The subject on the screen can be changed. Check the header image of this post for a message.

• Thanks for reading.