Ugly sweater CSS: The Child

Last time I made a ugly sweater based off of a LEGO figure. No fig this time but I reused the sweater design and added a new character.

The Sweater

The sweater is almost the same as the one in the BB-8 post so I won't go into depth about it again. The only change was to switch the seams from black to white. Design tip if you are reusing NONFUNCTIONAL code or following a tutorial change something. Always explore what can be done.

Reuse of code

BB-8's bottom is a sphere. I noticed I could reuse that part of code for another character. I altered the shape by changing the border-radius. It was 50% all around. I removed it from the top, making that part flat. The bottom still has border-radius applied so it is rounded.

 <div class="cradleBody">

 </div> 

.cradleBody {
    background-color: white;
    height: 50px;
    width: 120px;
    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: 2px solid black;
    border-top: 0;
    overflow: visible;
    flex-direction: column;
}

Next I added a rectangle to show the lip of the cradle.

           <div class="cradleBody">
            <div class="cradleLip"></div>
           </div> 

.cradleLip {
    background-color: white;
    height: 12px;
    width: 128px;
    border: 2px solid black;
    margin-top: -66px;

}

An Alien

Next I built the body from a couple of rectangles, childRobe and childRobeCollar. I used the lower one to hold the blocks for the Child's hand. justify-content: space-between; forced the hands to set at each end of the childRobe. There's no border on it so it blends in with the body.

       <div class="childRobeCollar"></div>
       <div class="childRobe">
        <div class="childHands"></div>
        <div class="childHands"></div>
       </div>

.childRobe {
    background-color: #d7bfa6;
    height: 40px;
    width: 88px;
    margin-top: -70px;
    margin-right: -108px;
    display: flex;
    justify-content: space-between;
}

.childRobeCollar {
    background-color: #d7bfa6;
    height: 50px;
    width: 94px;
    margin-top: -90px;
    margin-right: -92px;
    border-top-left-radius: 34%;
    border-top-right-radius: 34%;
    border: 1px solid black;
}

And I'll form the Head

Next the head: the head is made of two rectangles modified with border-radius. The ears are one long rectangle that was moved under the head div by adjusting the margins. Then the head sits on top. Then the eyes add some expression.

The Child and cradle are wrapped in a div called The child. The filter: drop-shadow(0 0 1.5rem white) give the glow effect to the character.

            <div class="childEars"></div>
        <div class="childHead">
            <div class="childEyes">
                <div class="pupil"></div>
            </div>
            <div class="childEyes">
                <div class="pupil"></div>
            </div>
        </div>

.childHead {
    background-color: #88af90;
    height: 40px;
    width: 60px;
    border: 1px solid black;
    margin-top: -150px;
    margin-right: -76px;
    border-top-left-radius: 34%;
    border-top-right-radius: 34%;
    display: flex;
    justify-content: space-evenly;
    overflow: visible;
}

.childEyes {
    background-color: black;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center; 
}


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

Final step is to add the back to the cradle. This is two semi-circles like I used for the cradle body. I just adjusted the height and width till it formed a good backdrop.

And there is the final version of the Child made with CSS. This was another fun build hope you enjoyed it.

UPDATE: A year later I changed the color scheme to be even more festive. See it here

-$JarvisScript git push