DEV Community

loading...
Cover image for Ugly Sweater CSS

Ugly Sweater CSS

jarvisscript profile image Chris Jarvis Updated on ・3 min read

Back in October I did a series of faces made with CSS for Halloween. Now that it's holiday season I'm was looking around for blog ideas. I thought about ornaments but I wanted something that was more fun.
I have a LEGO Advent Calendar that has Star Wars Characters wearings ugly sweaters. I saw this BB-8 sweater and thought that's it, Ugly Sweaters.

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

I used the dev tools to get the sweater color. To make the collar and bottom of the sweater, I made a div for each and inserted 10 divs with width of 10%. I named these divs "stitch." I used border: 2px dashed black; with the sections next to each other the sides were doubled and too thick, so I reduced the border-Left: and border-Right: to 1px.

        <div class="collar">
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
        </div>


Enter fullscreen mode Exit fullscreen mode
.collar, .base {
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: center;
  align-items: center; 
  position: relative;
}

.stitch {
    border: 2px dashed black;
    border-right: 1px dashed black;
    border-left: 1px dashed black;
    height: 30px;
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center; 
}

Enter fullscreen mode Exit fullscreen mode

graphic to simulate a sweater. The background is green, snow is falling.

I used a similar method to make the red and green pattern. This time I used a dotted border to change the look of the stitching. The green section originally didn't have a background color and was just transparent to show the sweater background. But when I added a snow graphic as a background image, the snow showed in the "green" sections. I added green back to cover the snow.

.red_stitch {
    background-color: red;
    border: 2px dotted black;
    height: 10px;
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.transparent_stitch {
    background-color: #3d8425;
    border: 2px dotted black;
    height: 10px;
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center; 
}

Enter fullscreen mode Exit fullscreen mode

The background snow was a tip from Carlos Escalera. I thought about trying to code snow myself but this background image tip was so direct to the point and my challenge was to make the character.

That's the overall sweater now it's time to add our little friend.

First draw two circles

BB-8's body and head are both circular. They began as rectangles and were rounded with border-radius. The body has the same border-radius all around but I played with the radiuses on the top and bottom till I got the half sphere of BB-8's head. The head has a bottom border color that matches the sweater.

bb-8 on a green ugly sweater. It is snowing.

.droid_body {
    background-color: white;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.droid_head {
    background-color: white;
    position: absolute;
    height: 40px;
    width: 88px;
    border-top-right-radius: 70%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 5px solid #3d8425;
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-top: -125px;
    overflow: visible;
}

Enter fullscreen mode Exit fullscreen mode

The orange circle on the body is just a circle with a thick border.

          <div class="droid_body">
         <div class="droid_circle"></div>
          </div>            

Enter fullscreen mode Exit fullscreen mode
.droid_circle {
    border: 8px solid orange;
    border-radius: 100%;
    height: 35px;
    width: 35px; 
}
Enter fullscreen mode Exit fullscreen mode

BB's head contains several rectangles and squares. The biggest note here is that the antenna is taller than the head. They are the same color so you can only see what extends out of the head div. The antenna is visible due to the overflow: visible; on the head div.

       <div class="droid_head">
            <div class="droid_block"></div>
            <div class="droid_block"></div>         
            <div class="droid_eye"></div>
            <div class="droid_antenna"></div>
            <div class="droid_dot"></div>
            <div class="droid_block"></div>

       </div>

Enter fullscreen mode Exit fullscreen mode
.droid_attenna {
    background-color: white;
    height: 50px;
    width: 8px;
    margin-left: 12px;
    margin-top: -20px;
}
Enter fullscreen mode Exit fullscreen mode

What I learned

This was a fun project. I enjoyed building the sweater out of shapes and layer the shapes into something recognizable.

minimalist bb 8

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Discussion (6)

Collapse
nickytonline profile image
Collapse
jarvisscript profile image
Chris Jarvis Author

Thank you Nick!

Collapse
codebyjustin profile image
Justin

Great tut ! :D

Collapse
jarvisscript profile image
Collapse
thomasbnt profile image
Thomas Bnt

Awesome 😄☕

Collapse
jarvisscript profile image
Forem Open with the Forem app