CodeNewbie Community 🌱

Cover image for CSS Halloween: Haunted House Party.
Chris Jarvis
Chris Jarvis

Posted on • Originally published at dev.to

CSS Halloween: Haunted House Party.

#css #frontend #tutorial

I am concluding my 2021 CSS Halloween Ugly Sweater Series. Links to previous posts are at top and bottom of this post.

It's almost Halloween so I'm wrapping the series up by visiting a haunted house.

Ugly black sweater. It has a row white stitching to make boxes. Under that a row of alternating square of orange and white.

Sweater Stand-up

This is the basic sweater. Click to see how it was made. A black background with a row of white boxes filled with bats and eyes. Under that a row of alternating white and orange boxes. Then, the sweater torso, a large open area of black, followed by the rows of boxes in reverse order.

I placed a character div in that torso div. Inside the character div is a div for a specific character for this post it has a class of window. Each window div will be filled with several more divs to make a Halloween themed creature.

Add the Character 

<div class="torso"> 
`
`
`
   <div class="character">
     <div class="window"></div> 
   </div character>
`
`
`
</div>
Enter fullscreen mode Exit fullscreen mode 
/* CHARACTER //////////////// */

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
    margin: -10px 0 0 0;
}

.window {
    background: linear-gradient( rgb(77, 16, 138, 0.75), 
        #49FC84 );
    height: 368px;
    width: 225px;
    border-top-right-radius: 40%;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px; 
    margin-top: -10px;
    overflow: hidden;
}

.window_red {
    background: linear-gradient(
      rgba(255, 0, 0, 0.95), 
      rgba(255, 255, 0, 0.75)
    )
}
Enter fullscreen mode Exit fullscreen mode

The windows are made from rectangles with border-radius added to the top to give the window an arch. The window-red class adds a second colored background.

four arched windows.

<div class="window window_red">
    <div class="centerLine"></div>
    <div class="verticalLine"></div>
    <div class="centerLine"></div>
    <div class="verticalLine"></div>
    <div class="centerLine"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
/* ///// WINDOW PANE //// */

.centerLine {
    background-color: #000;
    height: 3px;
    width: 100%;
    z-index: 0;
    margin-top: 10px;
}

.verticalLine {
    background-color: #000;
    height: 100%;
    width: 6px;
    margin-top: 0px;    
    z-index: 0;
}
Enter fullscreen mode Exit fullscreen mode

For the next step I added some framework to the windows. The divs for centerLine and verticalLine are in each of the four windows with that window's character divs. For brevity I'll only show them in the next character div code block.

Four arched windows. with a grid frame over the glass.

The Headless CMS Woman

The body is made out of an hourglass shape. This is made with two trapezoids. To make a trapezoid with CSS you make a square using borders, give the side you want the base on a border color make the other sides transparent. Add some width or height and back ground color to the item. Otherwise you get a triangle.

For the hourglass, The top and bottom have color while the left and right sides are transparent.

The arms and hands are made with rectangles. I used
transform: rotate(#X deg) to make them rotate in the direction I wanted. The head is an rotated oval.

4 windows, 3 are empty, One has the Silhouette of woman. She's holding her head above her body.

    <div class="window window_red">

            <div class="hourglass"></div>
        <div class="headlessArmLeft"></div>
        <div class="headlessArmLeftElbow"></div>
        <div class="headlessHand"></div>
        <div class="head"></div>
        <div class="headlessArmRight"></div>
        <div class="headlessArmRightElbow"></div>


        <div class="centerLine"></div>
        <div class="verticalLine"></div>
        <div class="centerLine"></div>
        <div class="verticalLine"></div>
        <div class="centerLine"></div>

    </div>
Enter fullscreen mode Exit fullscreen mode 
.hourglass {
border-top: 125px solid #000;
border-bottom: 195px solid #000;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
height: 0px;
width: 45px;
position: absolute;
border-radius: 20%;
margin-bottom: -155px;
}


.headlessArmLeft {
    background-color: black;
    height: 125px;
    width: 20px;
    margin-top: -163px;
    margin-left: -200px;
    position: absolute;
    border-radius: 20%;
    transform: rotate(120deg);
}

.headlessArmLeftElbow {
    background-color: black;
    height: 100px;
    width: 20px;
    margin-top: -233px;
    margin-left: -127px;
    position: absolute;
    border-radius: 20%;
    transform: rotate(-120deg);
}

.headlessHand{
    background-color: black;
    height: 16px;
    width: 30px;
    margin-top: -285px;
    margin-left: -19px;
    position: absolute;
    border-radius: 18%;
    transform: rotate(0deg);
}
Enter fullscreen mode Exit fullscreen mode

Memory Vampire

The vampire is a long body and head with two small thin rectangles to hint at a collar. He is standing in his coffin while bats fly around him.

4 windows, 2 are empty, 2 have silhouettes of monsters. One is a headless woman, the other a vampire rising from its coffin. 

    <div class="window">
                <div class="vcollar"></div>
        <div class="vampHead"></div>
        <div class="vcollarRight"></div>
        <div class="batRight vampbat">}</div>
        <div class="vamp"></div>

        <div class="batLeft vampbat2">}</div>
        <div class="batRight vampbat3">}</div>

            <div class="coffinCap"></div>
        <div class="coffinBottom"></div>

    </div>
Enter fullscreen mode Exit fullscreen mode 
.vampHead{
    background-color: black;
    height: 60px;
    width: 48px;
    margin-top: -160px;
    position: absolute;
    border-radius: 45%;
}

.vcollar {
    background-color: black;
    height: 39px;
    width: 4px;
    position: absolute;
    transform: rotate(120deg);
    margin-right: 37px;
    margin-bottom: 121px;
}

.vcollarRight {
    background-color: black;
    height: 39px;
    width: 4px;
    position: absolute;
    transform: rotate(-120deg);
    margin-right: -37px;
    margin-bottom: 121px;
}

.vamp {
    background-color: black;
    height: 215px;
    width: 85px;
    border-radius: 25%;
    position: absolute;
    margin-top: 99px;
}
Enter fullscreen mode Exit fullscreen mode

The coffin is made with trapezoids. Built similar to triangles using transparent sides. But it also has some width, where the triangles had no background color, height, or width.


.coffinTop {
    border-bottom: 50px solid black;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 125px;
    position: absolute;
    margin-top: 220px;
}
.coffinBotton {
        border-top: 50px solid black;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 125px;
    position: absolute;
    margin-top: 320px;
}
Enter fullscreen mode Exit fullscreen mode

The bats use the same class as the ones in the sweater border. I made them bigger and changed the color. Each bat had to be position individually by changing the margins.

.batRight {
  transform: rotate(145deg);
  font-size: 1.5rem;
}

 .vampbat {
    color: black;
    font-weight: bold;
    font-size: 3rem;
    position: absolute;
    margin-top: -290px;
    margin-right: 50px;
 }

.vampbat2 {
    /* Same as vampbat */
    margin-top: 90px;
    margin-right: 150px;
 }
Enter fullscreen mode Exit fullscreen mode

Spider in the Web

The Spider is two overlapping ovals and some rectangles. Each leg is two parts that bend at the knee. The code for each leg section is similar, the placement is changed using margin-left, margin-top, and transform: rotate(). Leg3 And Leg4 are not visible on screen they are hidden by the black around the windows. But I used them to position the lower sections, or knee divs, of the legs.

4 windows, 1 is empty, 3 have silhouettes of monsters, a headless woman, a vampire rising from its coffin, the last a giant spider.

    <div class="window window_red">

        <div class="spider">    
        <div class="spider2"> </div>
        <div class="leg1"></div>
        <div class="leg1_knee"></div>
        <div class="leg2"></div>
        <div class="leg2_knee"></div>

        <div class="leg3"></div>
        <div class="leg3_knee"></div>
        <div class="leg4"></div>
        <div class="leg4_knee"></div>
        </div>
      </div>
Enter fullscreen mode Exit fullscreen mode 
/* spider ////////// */

.spider {
    height: 135px;
    width: 125px;
    background: black;

    display: flex;
    align-items: center; 
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 54%;
    border-bottom-left-radius: 54%; 
    justify-content: space-between;
    position: absolute;
    margin-top: -355px;
    margin-left: 100px
}

.spider2 {
    height: 85px;
    width: 85px;
    background: black;
    display: flex;
    align-items: center; 

    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 54%;
    border-bottom-left-radius: 54%; 
    justify-content: space-between;
    margin-top: 145px;
    position: absolute;  
}

.leg1 {
    width: 150px;
    height: 8px;
    background-color: black;
    transform: rotate(140deg);
    position: absolute;
    margin-left: -86px;
    margin-top: 80px;
}

.leg1_knee {
  width: 129px;
  height: 8px;
  background-color: black;
  margin-left: -107px;
  margin-top: 285px;
  transform: rotate(-118deg);
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Franken Frameworks

This monster is made of a bunch of blocks. The head is a square with rounded corners, the neck is a square. The body is a long rectangle. Attached to either side are blocky shoulders. And the arms hang to the side with a gap between the body so the background can show.

4 windows with silhouettes of monsters. A headless woman, A vampire rising from its coffin, a giant spider, and Frankenstein's creature/

    <div class="window">

        <div class="blockHead"></div>
        <div class="neck"></div>
        <div class="blockHeadBody"></div>
        <div class="shoulderLeft"></div>
        <div class="armLeft"></div>
        <div class="shoulder"></div>
        <div class="arm"></div>

    </div>
Enter fullscreen mode Exit fullscreen mode 
.blockHead {
    height: 79px;
    width: 72px;
    background: black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 6px solid #000;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: auto;
    position: absolute;
    margin-top: -155px;
    margin-right: 50px;  
}

.blockHeadBody {
    height: 285px;
    width: 145px;
    background: black;

    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    border: 6px solid #000;
    border-radius: 10%;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 250px;
    margin-right: 50px;
    position:absolute;

}

.neck {
    background-color: black;
    height: 50px;
    width: 50px;
    margin-top: -20px;
    margin-left: -50px;
    position: absolute;

}

.shoulder {
    background-color: black;
    height: 51px;
    width: 27px;
    margin-top: 15px;
    margin-left: 120px;
    position: absolute;
    border-radius: 10%;

}

.arm {
    background-color: black;
    height: 200px;
    width: 27px;
    margin-top: 163px;
    margin-left: 141px;
    position: absolute;
    border-radius: 10%;
}
Enter fullscreen mode Exit fullscreen mode

Review

This was tough. There were creatures I wanted to build but just couldn't with my current CSS capabilities. I also limited my options by making the characters as silhouettes. I had to pick subjects that were recognizable as only outlines. I did learn a bunch about using transform rotate and skew.

Have you ever made something cool with CSS? Share it.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
lastreaction profile image
lastreaction •

Have you tried Nerf Wars near Dallas Fort Worth? it's so good. I recently had an experience of it. Nerf Wars can vary in style, from casual friendly competitions to more organized tournaments. Common game types include capturing the flag, team deathmatch, or free-for-all, where the goal is to either eliminate all opponents or complete specific objectives.

Collapse
 
marklee24 profile image
Marklee24 •

A CSS Halloween haunted house party sounds like such a cool project—combining coding skills with creativity is always a win! It’s like building something fun from the ground up while learning along the way. I love how themes like this let you explore design, animations, and interactivity all in one go. It reminds me of the way online platforms balance visuals and functionality—like when I came across big-baazi-casino-review which does a great job of blending style with user-friendly details. Bringing those elements into coding projects can really make them stand out. How did you decide on the spooky details? I bet the final result looks awesome!

Read next

muhaammadali2 profile image

Optimizing Performance for an Online Store

Muhammad Ali -

johnsmith167 profile image

Thrilling Team Outings: 10 Must-Try Experiences in the NYC Area!

John-smith167 -

yakskiaurns profile image

A Comprehensive Guide to Urns for Cremation, Human Ashes, and Adult Ashes

yakskiaurns -

hiredeveloper profile image

Personalization in Online Casino Software: the Secret to Player Loyalty

Hiredeveloper -