Posted on Dec 26, 2023

Ugly Sweater CSS: Christmas on Endor

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