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.
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<
/* 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;
}
This gives a basic circle that will be the head for King Kong.
.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;
}
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.
.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;
}
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>
.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;
}
If you want to see my other CSS creations look here, Halloween characters faces and Ugly Sweaters.
-$JarvisScript git push
Top comments (0)