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.
Semi circle only bottom half of a circle.
<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;
}
bar placed on top of semi circle.
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.
tan block on top of white cradle.
<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.
The child from the mandalorian. Young alien that appears to be same species as Yoda.
<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.
grogu in his cradle
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