TheLazy.Dev
Portfolio GitHub

Blog

css |frontend |tutorial |todayilearned

Ugly sweater CSS: The Child

jarvisscript

Chris Jarvis

Posted on December 14, 2020

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.

Poe Dameron wearing a gaudy sweater. It has a pic of bb-8 on it.

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.

Semi circle only bottom half of a circle.

 <div class="cradleBody">

 </div>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.cradleLip {
    background-color: white;
    height: 12px;
    width: 128px;
    border: 2px solid black;
    margin-top: -66px;

}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
jarvisscript
Chris Jarvis

Posted on December 14, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Ugly sweater CSS: The Child
css Ugly sweater CSS: The Child

December 14, 2020