Ugly Sweater CSS: Christmas on Endor

#css #frontend

This ugly sweater was based on LEGO the Ewok minifigure from the LEGO Star Wars Advent calendar. The other figure wearing a sweater was Emperor Palpatine. But he had almost the same sweater as the Darth Vader figure so I'm not remaking that.

Basic Sweater

This a a modification of the Spider-Man and Black widow sweatersrs from earlier this month. The colors have been changed but the structure is the same.

<div class="sweater">
  <div class="collar"></div>

    <div class="torso">

    <div class="InnerSweater">
      <wrapper>
        <snow></snow>
        <redtree></redtree>
        <snow></snow>
      </wrapper>
    </div> 
    </div>

  <div class="hem"></div>

</div>

Inner Sweater

The Inner Sweater holds the main subject of the sweater. Here it is a Christmas tree and falling snow.


.InnerSweater {
    width: 2000px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    column-gap: 40px;
}

Let it snow

The falling snow was made by alternating the spacing in rows of 10x10px white squares. One set has used justify-content: space-between; the other justify-content: center. This is an expanded version of the snow on the Black Widow sweater.


.flake_wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.flake_wrapper2{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 180px;
}

The Tree

The tree was made by stacking triangles. These were made by giving the a rectangle a border-bottom of red while the other borders are transparent.

<div class="redtree">
    <div class="topper">
        <div class="topperT"></div>
        <div class="topperT vrt"></div>
        <div class="toppercenter"></div>
    </div>
    <div class="redtree_mid"> 

        <div class="redtree_top"></div>
    </div>
        <div class="trunk"></div>
    </div>

.redtree{
    height: 0px;
    width: 0px;
    background: transparent;

    border-top: 0px solid transparent;
    border-bottom: 195px solid var(--SweaterRed);
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    display: grid;
    justify-content: center;
    align-items: center;
}

.redtree_mid{
    height: 0px;
    width: 0px;
    background: transparent;

    border-top: 0px solid transparent;
    border-bottom: 165px solid var(--SweaterRed);
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    display: grid;
    justify-content: center;
    align-items: center;
    margin-top: -40px;
}

.redtree_top{
    height: 0px;
    width: 0px;
    background: transparent;

    border-top: 0px solid transparent;
    border-bottom: 100px solid var(--SweaterRed);
    border-left: 50px solid transparent;
    border-right:50px solid transparent;
    display: grid;
    justify-content: center;
    align-items: center;
    margin-top: -30px;
}