I am continuing my CSS Halloween Ugly Sweater Series. Links to previous posts are above. Last week I did Among Us, today I’m building the masks from Squid Game.
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 yellow fading to orange, and then dark red, followed by the rows of boxes in reverse order. The step to add the gradient to the sweater is here.
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 guard.
Add the Character
<div class="torso">
`
`
`
<div class="character">
<div class="guard"></div>
</div character>
`
`
`
</div>
/* CHARACTER //////////////// */
.guard {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
overflow: visible;
}
I started with the circle from the previous exercise then made it taller and thinner. By adjusting the height, width, and border radius.
Similar to last week's exercise, I’ll make one character then adjust the code to make others.
.guard {
height: 220px;
width: 185px;
background:rgba(0, 0, 0, 1);
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
flex-direction: column;
border-top-right-radius: 45%;
border-top-left-radius: 45%;
border-bottom-right-radius: 54%;
border-bottom-left-radius: 54%;
border: 6px solid #000;
}
Next a frame was added to divide the mask into three sections. For this horizontal and vertical lines were added to make a T shape. I had to keep adjusting the margin-top as I added elements to the mask.
<div class="guard">
<div class="flex-container">
<div class="maskframe">
<div class="centerLine"></div>
</div>
<div class="maskframe">
<div class="verticalLine"></div>
</div>
</div>
</div>
.maskframe {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border-top: 0;
overflow: visible;
}
.centerLine {
background-color: #333;
height: 12px;
width: 194px;
margin-left: -6px;
z-index: 5;
margin-top: 15px;
}
.verticalLine {
background-color: #333;
height: 140px;
width: 14px;
margin-top: 0px;
z-index: 0;
}
The guards have different shapes on their masks. The shapes are outlines. So there is no background color, just border colors. The square needs less code so I made that first. A div with class of square was added to the maskframe before the centerline div. After adding it I had to adjust the placement of the line from the previous step.
<div class="guard">
<div class="flex-container">
<div class="maskframe">
<div class="square"></div>
<div class="centerLine"></div>
</div>
<div class="maskframe">
<div class="verticalLine"></div>
</div>
</div>
</div>
.square {
height: 40px;
width: 40px;
/* add one line here to make a circle */
border-top: 10px solid rgba(255, 255, 255, 0.75);
border-right: 10px solid rgba(255, 255, 255, 0.75);
border-bottom: 10px solid rgba(255, 255, 255, 0.75);
border-left: 10px solid rgba(255, 255, 255, 0.75);
}
The square outline was solid white. That didn't look like it was attached to the mask. So the opacity was lowered t0 0.75 rgba(255, 255, 255, 0.75); to fade it and make the shape merge visually to the mask.
Next I added to ovals to make the hoodie. I wrapped these divs around the previous guard div. The hoodie class in the main pink hoodie. The hoodieInner is an oval of darkred that adds an off center ring around the mask. There is a margin-left: 20px; to add space between the guards that will be added soon.
<div class="hoodie">
<div class="hoodieInner">
<div class="guard">
<div class="flex-container">
<div class="maskframe">
<div class="square"></div>
<div class="centerLine"></div>
</div>
<div class="maskframe">
<div class="verticalLine"></div>
</div>
</div>
</div>
</div>
</div>
.hoodie {
background-color: #b93d51;
height: 300px;
width: 225px;
border: 4px solid darkred;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
}
.hoodieInner {
height: 234px;
width: 192px;
background: darkred;
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
border: 4px solid darkred;
border-top-right-radius: 45%;
border-top-left-radius: 45%;
border-bottom-right-radius: 54%;
border-bottom-left-radius: 54%;
}
This guard looks good now, time to add the others. Everything is the same except for the shape outlines on the mask foreheads.
To make he circle I just needed to add border radius: 50%. to the code used for the square.
.circle {
height: 40px;
width: 40px;
border-radius: 50%;
border-top: 10px solid rgba(255, 255, 255, 0.75);
border-right: 10px solid rgba(255, 255, 255, 0.75);
border-bottom: 10px solid rgba(255, 255, 255, 0.75);
border-left: 10px solid rgba(255, 255, 255, 0.75);
}
The triangle however takes more code. To make a triangle with CSS you make a square using borders, give the side you want the triangle base on a color make the other sides transparent. Notice there is no background color. You could give each side a different color to have a 4 color square made of wedges.
To make the triangle look like an outline, I had to add a second triangle inside the first one. For the inner triangle the border color had to match the background color om the guard.
Since the triangle shape moved the maskframe around I had to add new classes and adjust the margins on the center and vertical line to mask the ones on the other guards.
``CSS
.triangle {
border-right: 40px solid transparent;
border-bottom: 60px solid rgba(255, 255, 255, 0.75);
border-left: 40px solid transparent;
margin-bottom: 54px;
display: flex;
justify-content: center;
align-items: center;
}
.triangleInner {
border-right: 34px solid transparent;
border-bottom: 50px solid #000;
border-left: 34px solid transparent;
margin-left: -73px;
margin-top: -48px;
}
.centerLineTriangle {
background-color: #333;
height: 12px;
width: 194px;
/border: 2px solid #333;/
margin-left: -6px;
z-index: 5;
margin-top: -45px;
}
.verticalLineTriangle {
background-color: #333;
height: 128px;
width: 14px;
/border: 2px solid #333;/
margin-top: -16px;
z-index: 0;
}
`
This was another fun challenge. I learned how to make a hoodie and with some changes I can make robes in future projects.
-$JarvisScript git push
Top comments (0)