CSS Halloween: Haunted House Party.

Chris Jarvis - Oct 29 '21 - - Dev Community

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

Image
The 15 Things Your Boss Wishes You'd Known About Mental Health Assessment Near Me
Image
Does Technology Make Mesothelioma Non Asbestos Exposure Better Or Worse?
Image
How can I learn JavaScript effectively and practically?
Image
5 Arguments Head Injury Attorneys Near Me Is Actually a Great Thing
Image
15 Secretly Funny People Working In Leg And Arm Injury Attorneys
Image
Stwórz Idealną Oazę Spokoju: Najlepsze Meble do Sypialni na Każdy Styl
Image
This Week's Top Stories About Leg And Arm Injury Attorney Leg And Arm Injury Attorney
Image
This History Behind Filter Coffee Makers Is One That Will Haunt You Forever!
Image
Hiring in the Open - How Companies Can Discover Top Talent via Opire

opensource, webdev, beginners, programming
Image
Crypto Token Development: A Comprehensive Guide
Image
web-site judi slots online paling dipercaya mudah menang
Image
How to Host a Laravel Project in a Subdirectory on Shared Hosting without Exposing `/public` in the URL

beginners, tutorial, programming, python
Image
The illusion of simplicity: how OOP can overcomplicate simple problems

agile, programming, softwareengineering
Image
Yok Singkirkan saat ini pula dan raup keuntungan besarnya dari judi online
Image
Guide To Bi Fold Door Repair: The Intermediate Guide Towards Bi Fold Door Repair
Image
WebSocket: The Backbone of Real-Time Communication in Modern Web Applications

webdev, javascript, node, backend
Image
Scrapper Concorrente

go, scrappe, goroutines
Image
10 Facebook Pages That Are The Best Of All Time Concerning Repair Bifold Door Top Pivot
Image
15 Startling Facts About Asbestos Exposure Claims That You Never Knew
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .