DEV Community

Cover image for Ugly Sweater CSS: Spider-man.
Chris Jarvis
Chris Jarvis

Posted on

Ugly Sweater CSS: Spider-man.

Sweater-Man Sweater-Man, here's comes the Sweater-man

This ugly sweater was inspired by LEGO Spider-man he is part of the LEGO Avengers Advent calendar. I really should get a referral link for them.

LEGO Spider-man in a sweater. the sweater is red.

edit: This timing wasn't planned but I just learned today is Ugly Sweater. The third Friday of December is Ugly Sweater day.

Basic Sweater

I've written about this before in Ugly Sweater BB-8 but a short explanation is the sweater body is a Dark Red background with black 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="InnerSweater">
      <snow></snow>
      <spider-man></spider-man>
      <snow></snow>
    </div> 
  <div class="hem"></div>
</div>

Enter fullscreen mode Exit fullscreen mode

Inner Sweater

Previous sweaters have featured a single item in the center. This time I wanted to add bands of snow flakes and band of Spider-men. I need to add a wrapper div called InnerSweater so I could make Columns.


.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 SnowRow and SpideyRows which themselves contain rows of items.

.snowRow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 140px;
    margin-top: 10px;
}

.spideyRow {
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 40px;
}

Enter fullscreen mode Exit fullscreen mode

Snow Business

The snowflakes are modified squares with bars stacked on top. I made a white line and copied it. Then used transform rotate() and margins to adjust the positing of the copies. So there's an X and a plus sign (+) on the white square.

Can see it better with Borders. Here you can see the vertical, horizontal, and angles lines.

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.

Remove the borders and the X and plus sign blend in with the white of the square.

row of five snowflakes

.line{
    width: 70px;
    height: 16px;
    background: white;
    position: absolute;
}

.hz {
    margin-left: -10px;
}
.vrt{
    transform: rotate(90deg);
    margin-left: -10px;
}
.left{
    width: 82px;
    transform: rotate(45deg);
    margin-left: -14px;

}
.right{
    width: 82px;
    transform: rotate(-45deg);
    margin-left: -14px;
}

Enter fullscreen mode Exit fullscreen mode

Spider-man

Spider-man's mask is a Square with ovals for eyes. Transform rotate was used to make the ovals skew in different directions. The shape is the same. The difference is that they rotate in the opposite direction.

.eye{
    width: 16px;
    height: 30px;
    background: white;
    border: 4px solid var(--SweaterDarkRed);
    border-top:  6px solid var(--SweaterDarkRed);
    border-bottom: 8px solid var(--SweaterDarkRed);
    border-top-right-radius: 40%;
    border-top-left-radius: 40%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    transform: rotate(30deg);
}

.eyeLeft{
    transform: rotate(-30deg);
}

Enter fullscreen mode Exit fullscreen mode

Sweater-Time

red sweater, has rows of snowflakes and a row of spider-man masks.

Spider-Song

This year Brenda Lee beat Mariah Carey for the number one song. Now is the time to get Spider-man on the top of the charts with Joy to the world(That I just saved.)

This album was a line in the Into the Spider-verse movie. But fans wanted it so they made a quick album. Songs are sung by the actual actors.

Joy to the world
I keep saving
Maybe I could get paid
I saved you all again
This time from the Kingpin
And literally I don't get paid
Kinda weird that I don't get paid
I make my own web fluid and it's not free, okay?

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Top comments (0)