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.

CSS
.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.

CSS
.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.

CSS
.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.https://christopherleejarvis.com/JarvisScript/?p=237&preview=true 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. CSS

.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. -$JarvisScript git push