This ugly sweater was inspired by LEGO Black Widow minifigure from the LEGO Avengers Advent calendar. I really should get a referral link for them, come on LEGO send me some bricks.
Basic Sweater
I've written about this before in Ugly Sweater BB-8 but a short explanation is the sweater body is a light blue background with dark blue boxes for the collar and hem.
In the torso center is the focus or character of the sweater. For more details read the BB-8 post.
<div class="sweater">
<div class="collar"></div>
<div class="torso">
<div class="InnerSweater">
<gifts></gifts>
<center>
.
.
.
</center>
<gifts></gifts>
</div>
</div>
<div class="hem"></div>
</div>
Inner Sweater
This is a modification to the Spider-Man sweater from last week. Spider-Man Sweater The colors have been changed and snowflakes have been modified but the structure is the same.
.InnerSweater {
width: 2000px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 50px;
column-gap: 40px;
}
The wrapper div contains Gift boxes and Widow hourglass.
.giftRow {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 140px;
margin-top: 10px;
}
.hourglassRow {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 80px;
}
Regifting (it's just like reusing code)
The snowflakes rows are now rows of gift boxes. I removed the 'X' and changed the plus sign to match the sweater color to be ribbons. Other colors made the sweater too busy.
The gift boxes.
.line, .ribbon{
width: 70px;
height: 16px;
background: white;
position: absolute;
}
.ribbon {
background: var(--sweaterblue);
}
.hz {
margin-left: -10px;
}
.vrt{
transform: rotate(90deg);
margin-left: -10px;
}
Snowmen
Snowmen are made by reusing the snowflake base. The bottom was made bigger changing the square to 70x70px.
Also two snowflakes from the previous sweater project. Below you can see the square that was used as a base for the gifts, snowflakes, and snowmen in the sweater.
.snowman{
width: 80px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.snow{
height: 50px;
width: 50px;
border-radius: 10%;
background: white;
display: grid;
justify-content: center;
align-items: center;
}
.snow_bottom{
width: 70px;
height: 70px;
border-radius: 10%;
background: white;
display: grid;
justify-content: center;
align-items: center;
}
The falling snow in the hourglass and the coal and carrot nose are are all 6x6px squares of different colors. The falling snow was made by alternating the spacing in rows of white squares. One set has used justify-content: space-between; the other justify-content: center
.flake_wrapper{
.
.
justify-content: space-between;
align-items: center;
gap: 6px;
}
.flake_wrapper2{
.
.
justify-content: center;
align-items: center;
gap: 18px;
}
Hourglass
The hourglass is made from a tall rectangle and its borders. The top and bottom borders have a red background. The left and right borders have a transparent background. This makes it look like two vertical triangles.
The same method was used to make a green triangle for the tree in the bottom of the hourglass.
.hourglass{
height: 0px;
width: 85px;
background: transparent;
border-top: 95px solid var(--SweaterRed);
border-bottom: 95px solid var(--SweaterRed);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-radius: 20%;
display: grid;
justify-content: center;
align-items: center;
}
Sweater-Time
Here is the final version of the Black Widow Ugly Sweater.
-$JarvisScript git push
Top comments (3)
Haha, loving these! LEGO put some dang time into their Xmas sweaters... and you put some time into this CSS art. What a nice showcase... come on, LEGO, pay up!
Looks fire
Thank you.