DEV Community 👩‍💻👨‍💻

Cover image for CSS Halloween: The Squid Game is a Float
Chris Jarvis
Chris Jarvis

Posted on

CSS Halloween: The Squid Game is a Float

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.

ugly black sweater. With a middle of yellow, orange, and red. It has a row of white stitching to make boxes. Under that a row of alternating square of orange and white.

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

.guard {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
    }
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

A black oval.
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>
Enter fullscreen mode Exit fullscreen mode

.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;
}

Enter fullscreen mode Exit fullscreen mode



Black oval with a dark gray T on the it.

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>
Enter fullscreen mode Exit fullscreen mode
.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);
}
Enter fullscreen mode Exit fullscreen mode

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.

mask. A oval with a square on the forehead.

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>
Enter fullscreen mode Exit fullscreen mode
.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%; 
}

Enter fullscreen mode Exit fullscreen mode

This guard looks good now, time to add the others. Everything is the same except for the shape outlines on the mask foreheads.

Someone wearing a mask and a hoodie.

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

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

}

.triangleInner {

border-right: 34px solid transparent;
border-bottom: 50px solid #000;
border-left: 34px solid transparent;
margin-left: -73px;
    margin-top: -48px;
Enter fullscreen mode Exit fullscreen mode

}

.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;
}
`

Three people wearing masks and hoodies. The hoodies are pink and masks are black. The only difference is each has a shape on their forehead. triangle, square, and circle.

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)

19 Valuable Github Repositories for Beginners

>> Check out this classic DEV post <<