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.
Top comments (0)