CodeNewbie Community 🌱

Cover image for CSS Ugly Sweater: R2D2 We wish you a Merry Christmas.
Chris Jarvis
Chris Jarvis

Posted on • Originally published at dev.to

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 I 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

LEGO Stormtrooper wearing<br>
 a blue sweater. The sweater has the imperial crest on it

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>

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode
       <div class="character">
        <div class="R2D2"></div>
       </div>

Enter fullscreen mode Exit fullscreen mode

Are these the Droids you are looking for?

C3PO wearing and R2D2 sweater.

R2's Head

Outline of a dome shape.

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

Body

droid head and body. looks like a circular trash can

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>

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

}

Enter fullscreen mode Exit fullscreen mode

Body Panels

wire frame of R2D2

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

Feet

wireframe of R2D2 slight blue tint to the background.

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>

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

Enter fullscreen mode Exit fullscreen mode

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?

wireframe of R2D2 slight blue tint to the background.

Wireframe of R2D2

Star Wars Trivia

"R2D2 We wish you a Merry Christmas!"
Enter fullscreen mode Exit fullscreen mode

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

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

53 Posts, 171 Following, 87 Followers Β· 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

favicon hachyderm.io

Oldest comments (0)