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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay