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.
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>
.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;
}
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;
}
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.
.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;
}
The orange circle on the body is just a circle with a thick border.
<div class="droid_body">
<div class="droid_circle"></div>
</div>
.droid_circle {
border: 8px solid orange;
border-radius: 100%;
height: 35px;
width: 35px;
}
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>
.droid_attenna {
background-color: white;
height: 50px;
width: 8px;
margin-left: 12px;
margin-top: -20px;
}
What I learned
This was a fun project. I enjoyed building the sweater out of shapes and layer the shapes into something recognizable.
-$JarvisScript git push
Top comments (6)
Thank you Nick!
Great tut ! :D
Thank you!
Awesome 😄☕
Thank you!