CodeNewbie Community

Cover image for CSS Halloween: Docker Kong?
Chris Jarvis
Chris Jarvis

Posted on • Originally published at dev.to

CSS Halloween: Docker Kong?

Last year I made some Halloween characters faces using CSS. Then for Christmas I made Ugly Sweaters. Now that's it's October I'm putting them together for ugly Halloween sweaters.

I'm reusing the main sweater body from last year. But changing the color to fit the Halloween theme.

ugly black sweater. it has a row white stitching to make boxes. under that a row of alternating square of orange and white.

This is how we left the sweater last time. 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 a large open area of black followed by a the rows in reverse order.

Add the Character

<div class="torso"> 
.
.
.
   <div class="character">
     <div class="kong"></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-left: -60px;
}

.kong {
    background-color: #686565;
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: visible;
    flex-direction: column;
    border-top-right-radius: 40%;
    border-top-left-radius: 45%;
    border-bottom-right-radius: 48%;
    border-bottom-left-radius: 48%; 
    border: 6px dashed #686565;
    margin-bottom: 80px;
    justify-content: space-between;
}

Enter fullscreen mode Exit fullscreen mode

This gives a basic circle that will be the head for King Kong.

Dark gray circle. circle is slightly squished.

.eyes_pair {
    width: 140px;
    height: 90px;
    border-radius: 20%;
    background: #A9A9A9;
    margin-left: -190px;
    margin-top: -121px; 
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    overflow: overlay;
    z-index: 1;
    border: 4px solid #A9A9A9;
    justify-content: space-between;

}
.beard {
    border-top:100px #686565;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent; 
    margin-top: 156px;
    z-index: 0;
    display: flex;
    justify-content: space-between;
}

.lines {
    position: relative;
    margin:0 auto;
    margin-top: -170px;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-top: 67px solid #000;
    height: 0;
    width: 0;
}
.lines:before {
    border-top: 66px solid #a9a9a9;
    border-left: 66px solid rgba(0, 0, 0, 0);
    border-right: 66px solid rgba(0, 0, 0, 0);
    content: "";
    left: -66px;
    margin-top: -80px;
    position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

This rectangle with border-radius: 20%. will be the background for eyes. The triangle of the beard is made by making a rectangle using borders but giving three sides transparent boarders. Notice there is no background color just border colors.

Gray rectangle with gray triangle overlapping the bottom.

.Eyes {
    background-color: black;
    height: 54px;
    width: 54px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    border-top-right-radius: 13%;
    border-top-left-radius: 20%;
    border-bottom-right-radius: -38%;
}


.pupil {
    background-color: white;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: -4px;
}
Enter fullscreen mode Exit fullscreen mode

Two eyes on a gray face.

Finally add the mouth and nose. They are the same HTML I used on the wampa. Nose is just two gray circles with a black circle inside.

<div class="nostrils">
  <div class="nostrilsInside"></div>
</div>
<div class="nostrils">
   <div class="nostrilsInside"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.nostrils {
    width: 25px;
    height: 25px;
    background-color: #A9A9A9;
    border: solid 2px black;
    border-radius: 50%;
    margin-top: -90px;
    margin-left: -63px;
    z-index: 7;
    display: flex;
    justify-content: center;
}

.nostrilsInside {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    margin-top: 3px;
    z-index: 4;
}

.fangs {
    width: 25px;
    height: 33px;
    margin-top: -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black;
}

.fangs_bottom {
    width: 25px;
    height: 33px;
    margin-bottom:  -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black;
}
Enter fullscreen mode Exit fullscreen mode

King Kong face. The fur is gray.

If you want to see my other CSS creations look here, Halloween characters faces and Ugly Sweaters.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Discussion (0)