CSS Ugly Sweater: R2D2, We wish you a Merry Christmas

It's CSS Ugly Sweater season. The past two years I've made CSS projects based off of Ugly Sweaters. The inspiration came from a 2020 LEGO Star Wars Advent Calendar that had a minifig in a sweater. Since then I've made sweaters of Star Wars, Pokemon and Halloween.

This year the December 9th LEGO advent calendar gift was C3PO wearing a sweater of R2D2. That is the basis of today's art.

Since today's art is R2D2 listen to this while you read. See if you can guess the famous singer on this track.

Previously on Ugly Sweaters

I reused the basic sweater HTML from previous years. I changed the CSS for a darker blue sweater. I also changed the row of boxes to red and white.

A previous blog post with more detail on the sweater construction is in this post. Below is the stub code for overall HTML structure.

<div class="main">  
    <div class="flex-container">

    <div class="sweater">
        <div class=“torso">
                <div class="character">
           <div class="R2D2”></div>
                </div character>
            </div torso>
    </div sweater> 

       </div flex-container>
 </div main>

That's the sweater torso. I placed a character div in that torso. Inside the character div, is a div for a specific character. For this project it has a class of R2D2.

:root {
    --sweaterblue: #105fa2;
    --droidblue: rgb(85 143 191 / 32%);

}

.R2D2 {
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}

       <div class="character">
        <div class="R2D2"></div>
       </div>

Are these the Droids you are looking for?

R2's Head

The head is a rectangle with border radius applied to the top corners but not the bottom corners. That creates the curved dome with a straight edge at the bottom.

The eye and projector lens are squares made to circles with 50% border radius.

    <div class="head">
        <div class="eye"></div>
        <div class="projector"></div>
    </div>

.head {
    background-color: var(--droidblue);
    height: 80px;
    width: 200px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
    border: 4px solid white;
    border-bottom: 1px solid white;
}

.eye {
    height: 20px;
    width: 20px;
    border: 6px solid white;
    background-color: white;
    border-radius: 50%;
}

.projector {
    height: 14px;
    width: 14px;
    background-color: white;
    border-radius: 50%;
    margin-left: 68px;
}

Body

The main body or droidTorso div is inside the legs div. It was cleaner to position it that way. The legs div is a modified square the bottom border is transparent so it doesn't show on screen.

    <div class="legs">
        <div class="droidTorso">
        </div>
    </div>

.legs {
    height: 200px;
    width: 240px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: visible;
    border-top-left-radius: 6%;
    border-top-right-radius: 6%;
    border-bottom: 2px solid transparent; 
}
.droidTorso {
    background-color: var(--droidblue);
    height:200px;
    width: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
    border: 4px solid white;
    border-top: 2px solid transparent;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;

}

Body Panels

The body panel is made from horizontal bars and a vertical box with ovals inside. Plus an empty spacer box to help position everything.

    <div class="legs">
        <div class="droidTorso">
            <div class="box"></div>
            <div class="box"></div>
            <div class="openbox">
               <div class="circle"></div>
               <div class="circle"></div>   
            </div>
            <div class="emptybox"></div>
        </div>
    </div>

.box {
    height: 10px;
    width: 50px;
    background-color: white;
}

.emptybox{
    background-color: transparent;
    height: 20px;
}  

.openbox{
    height: 60px;
    width: 40px;
    border:2px solid white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.circle {
    height: 22px;
    width: 18px;
    border-radius: 33%;
    background-color: white;
}

Feet

The feet are squares with a transparent border-top. The borders are slightly thicker than most of the borders in the design.

And that's how I made R2D2 using shapes and borders.

    <div class="feetRow">
        <div class="foot"></div>
        <div class="spacerFoot"></div>
        <div class="foot"></div>
        <div class="spacerFoot"></div>
        <div class="foot"></div>
    </div>

.feetRow{
    height: 20px;
    width: 280px;

    display: flex;
    justify-content: space-around;
    align-items: center;

}

.foot{
    height: 10px;
    width: 40px;
    border: 4px solid white;
    border-top: 2px solid transparent;
}

.spacerFoot{
    height: 10px;
    width: 40px;
}

Compare Background

Originally I didn't have a background for R2D2. But thought the smaller circle in his head blended in with the snow in the background. I added a background with a low opacity to help set it apart while still matching the figure on which the art is based.

What looks better with Droid background, top image, or not, bottom image?

Star Wars Trivia

"R2D2 We wish you a Merry Christmas!"

There was a Star Wars Christmas Album called "Christmas in the Stars". A song on it was "R2D2 we wish you a Merry Christmas" It's children singing to R2D2. It's the first professional recording of John Bongiovi. Know the name?

You may know him as John Bon Jovi of Bon Jovi. That's your music history lesson for the day.

-$JarvisScript git push

Chris Jarvis :battery_full: (@jarvisscript@hachyderm.io) - Hachyderm.io

4.33K Posts, 715 Following, 272 Followers · :star_wars: Alright, let’s do this one last time. My name is Chris Jarvis. I was bitten by a radioactive variable and for Math.floor() years I’ve been the one and only JarvisScript :serenity:

hachyderm.io

Blog