Ugly Sweater CSS BB-8
Tags: css, frontend
Published: 2020-12-09 17:35:11

Back in October I did a series of faces made with CSS for [Halloween](https://dev.to/jarvisscript/css-alien-face-wip-38ig). 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.](https://yodaarchives.files.wordpress.com/2020/12/poe.jpg)


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.

```html
		<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>


```

```CSS
.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; 
}

```
![graphic to simulate a sweater. The background is green, snow is falling.](https://dev-to-uploads.s3.amazonaws.com/i/yfl3jashg9co58locpj9.jpg)

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.

```CSS
.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][snow effect]. 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.](https://dev-to-uploads.s3.amazonaws.com/i/2x9k2laxphqt98kt5tpw.jpg)



```CSS
.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.

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

```CSS
.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.   

```HTML
	   <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>

```

```CSS
.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. 

![minimalist bb 8](https://dev-to-uploads.s3.amazonaws.com/i/6yyscndjujwetzykfy65.jpg)

```
-$JarvisScript git push
```

[snow effect]:https://carloseo.com/let-it-snow-css-animation/