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.
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>
/* 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)
)
}
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.
<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>
/* ///// 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;
}
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.
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.
<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>
.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);
}
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.
<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>
.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;
}
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;
}
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;
}
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.
<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>
/* 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;
}
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.
<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>
.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%;
}
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
Top comments (1)
That's really cool!