DEV Community

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

Posted on • Edited on

3

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay