CSS Halloween: Screen Time

#css #halloween

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.