CSS Ugly Sweater: Thanos

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.

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.

        <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 {
    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; 
}

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.

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

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

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

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

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

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