DEV Community

Cover image for Ugly Sweater CSS: Black Widow
Chris Jarvis
Chris Jarvis

Posted on

Ugly Sweater CSS: Black Widow

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.

LEGO figure of Black widow in a sweater. the sweater is blue with snowmen and a black widow hourglass.

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>

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

row of snow flakes. with borders added to the parts that make it. it's a white square under long white bars. the bars form an x and a plus sign.

row of five snowflakes

The gift boxes.

White gifts boxes with blue ribbon.

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

Enter fullscreen mode Exit fullscreen mode

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.

a white square with rounded corners, same square with a plus plus mark on top, snowflake, snowman

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


Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Sweater-Time

Here is the final version of the Black Widow Ugly Sweater.

illustration of a sweater. the background is blue. there rows of gift boxes. There a row of snowmen and in the center is a red hourglass. the top part has falling snow the bottom a Christmas tree.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
michaeltharrington profile image
Michael Tharrington

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!

Collapse
 
jd2r profile image
DR

Looks fire

Collapse
 
jarvisscript profile image
Chris Jarvis

Thank you.