DEV Community

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

Posted on • Updated on

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

#css #tutorial #frontend #art

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

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 :blobfoxpirate: (@jarvisscript@hachyderm.io) - Hachyderm.io

4.17K Posts, 705 Following, 267 Followers · :battery_full: :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:

favicon hachyderm.io

Top comments (4)

Collapse
 
michaeltharrington profile image
Michael Tharrington •

Holy cow shaak! You started this series way on back in 2020... that's commitment. 🙌

I'm lovin' the R2D2 ugly Christmas sweater CSS drawing ya came up with here. Very nice!

And in general, I just love Star Wars ugly Christmas sweaters, haha... I really wanna pick up this one of the Death Star.

BTW, I'm also doing a LEGO advent calendar this season... mine is Harry Potter themed though. 🪄

Collapse
 
jarvisscript profile image
Chris Jarvis •

That's a cool sweater.

I didn't get the Harry Potter calendar but got some of the figs in a pack of random parts one time. One year the calendar theme was the Yule Ball and the pack bags of brick had Harry, Hermione, Ron, and the Patil twins in yule outfits.

Collapse
 
michaeltharrington profile image
Michael Tharrington •

Nice! So far I've gotten Harry, Moaning Myrtle, and Sirius... kind of a random assortment, but I'm not complaining, haha.

Collapse
 
shenwen_wu_3db7e70fadb909 profile image
shenwen wu •

Hi, we are a knitwear manufacturer, good at making and designing all kinds of Ugly Christmas sweaters, we only make Christmas sweaters with music and lights

Read next

draczihper profile image

Set Implementation In JavaScript

draczihper -

leandroveiga profile image

Mastering File Uploads and Downloads in .NET 8 Minimal APIs: A Comprehensive Guide

Leandro Veiga -

madsstoumann profile image

The Golden Ratio in CSS

Mads Stoumann -

nnnirajn profile image

10 Tailwind CSS Hacks Every UI Developer Should Know

Niraj Narkhede -