CSS Ugly Sweater: Thanos
Tags: css, frontend, art, tutorial
Published: 2022-12-21 14:36:52

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 LEGO Star Wars Advent Calendar that had a minifig in a sweater. Since then have I made sweaters of Star Wars, Pokemon, and Halloween.

This year there is a Guardians of the Galaxy LEGO advent calendar. One of the figure is Nebula wearing an ugly sweater of Thanos. That is the inspiration for today's post.


![LEGO Blue alien woman wearing a Christmas sweater](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orfy7i4sivwceotys8lf.jpg)


I modified the sweater from previous builds. To make the collar and bottom of the sweater, I made a div for each and inserted 11 divs with width of 9.09%. I gave these divs a class of "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 {
	background-color: var(--sweaterGold);
	border: 2px dashed black;
	border-right: 1px dashed black;
	border-left: 1px dashed black;
	height: 34px;
	width: 9.09%;
	padding: 2px;
	display: flex;
	justify-content: center;
	align-items: center; 
}


```

![graphic to simulate a sweater. The background is blue, at top and bottom are rows of gold boxes. each box has a colored oval.There are row of black triangles.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f084zpa5te2f5awc0jzl.jpg)

I added an infinity stone to each stitch div. The stones are in a pattern of five equal size stones with a larger stone in the middle. Then there's a repeat of the first five colors. 

```html
		<div class="collar">
			<div class="stitch"><div class="stone stoneAmber"></div></div>
			<div class="stitch"><div class="stone stoneRed"></div></div>
			<div class="stitch"><div class="stone stoneBlue"></div></div>
			<div class="stitch"><div class="stone stonePurple"></div></div>
			<div class="stitch"><div class="stone stoneGreen"></div></div>
			<div class="stitch"><div class="stone stoneYellow"></div></div>

			<div class="stitch"><div class="stone stoneAmber"></div></div>
			<div class="stitch"><div class="stone stoneRed"></div></div>
			<div class="stitch"><div class="stone stoneBlue"></div></div>
			<div class="stitch"><div class="stone stonePurple"></div></div>
			<div class="stitch"><div class="stone stoneGreen"></div></div>
		</div>

```

The inner rows of the sweater are a series of black triangles. They are made by a square with three transparent borders and then the top or bottom border with a color of black.

```CSS

.blackRow {
	border-top: 30px solid black;
	border-bottom: 30px solid transparent;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	display: flex;
	justify-content: center;
	align-items: center; 

}

.blackRow_bottom {
	border-top: 30px solid transparent;
	border-bottom: 30px solid black;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;

}

```

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 direct to the point.

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

I placed a character div in between the rows of triangles. Inside the character div, is a div for a specific character. For this project it has a class of Thanos.

```css

.thanos {
	display: flex;
	justify-content: center;
	align-items: center; 
	overflow: hidden;
	flex-direction: column;
}

```

```html
	   <div class="character">
		<div class="thanos"></div>
	   </div>
	
```



## And I'll from the head. ##

The head is a square with rectangles added to the top and bottom for the minifigure studs or posts. Then I built the face inside the head div.

![Blue background with gold rows. in the center is a purple square.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnku3i5ctnwvszt34gkl.jpg)



```HTML
	   <div class="character">
	      <div class="thanos">	 
		 <div class="top">
		 	<div class="headStud"></div>
		 </div>
		 <div class="midrow">
		  <div class="head"></div>
		  <div class="neckRow">
			<div class="neck"></div>
		  </div>
	     </div> 			
	   </div>
```

The neck and headstud divs are the same shape and size. They only differ in background color.


```CSS
.character {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; 
	overflow: visible;

	margin-top: 0px;
}


.thanos {
	display: flex;
	justify-content: center;
	align-items: center; 
	overflow: hidden;
	flex-direction: column;
}




.head {
	background-color: var(--thanosSkin);
	height:200px;
	width: 200px;
	display: flex;
	justify-content: space-around;
	align-items: center; 
	overflow: hidden;
	flex-direction: column;
	border: 6px solid black;
	border-top-left-radius: 20%;
	border-top-right-radius: 20%;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;

}

.neck{
	height: 20px;
	width: 60px;
	background-color: var(--sweaterGold);
	border: 6px solid black;
	border-top: 2px solid black;
	border-top-left-radius: 20%;
	border-top-right-radius: 20%;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	margin-top: 2px;

	position: absolute;
}
```
Thanos's face is made of simple shapes. The brow and chin are horizontal and vertical lines respectively. The eyes are squares with a little border-radius applied to the top of each.
The mouth and teeth are modified rectangles.  


![purple Thanos head.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtn6dev1zinox631w5fw.jpg)