DEV Community

Cover image for CSS Halloween: Screen Time
Chris Jarvis
Chris Jarvis

Posted on

5 1

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

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>

Enter fullscreen mode Exit fullscreen mode

vintage TV with big dials. There are ghosts on the screen.

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>
Enter fullscreen mode Exit fullscreen mode
.eyes {
  width: 20px;
  height: 30px;
  border-radius: 44%;
  background: var(--Black);
}

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

Enter fullscreen mode Exit fullscreen mode

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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (2)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Haha! Lovin' this one.

But, can you do a version like The Ring and have a creepy person climbing outta the tv?

A disturbing clip from The Ring where the girl with the long black hair climbs out of the TV

Collapse
 
jarvisscript profile image
Chris Jarvis

Not if I want to sleep. Haha

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

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay