DEV Community

Cover image for Ugly Sweater CSS: Echo Base
Chris Jarvis
Chris Jarvis

Posted on

3

Ugly Sweater CSS: Echo Base

Ugly sweater day is the third Friday of December. This year that is December 20th. Learn about Ugly sweater day on National Day calendar page..

For the past few years I've made CSS art versions of the LEGO Figure ugly sweaters. See the previous year under the series links. This 2024 Ugly Sweater features Leia and the battle of Echo base from The Empire Strikes Back.

Princess Leia LEGO figure. She has her hair in space buns, wearing white pants and a blue sweater. The sweater depicts a battle in the snow.

I started with my sweater template from previous years. There's a basic torso. Inside torso in the featured character for this sweater. Inside the character div are the two sides of the battle Rebels and Empire. Inside those divs are the vehicles of the battle.

<div class="torso"> 
   <div class="character">
     <div class="Rebels"></div> 
     <div class="Empire"></div> 
   </div character>
</div>
Enter fullscreen mode Exit fullscreen mode
.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}

.ground{
    width: 100%;
    height: 2px;
    background: white;
}


.rebels {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.empire {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

Rebels

The rebel side features a Cannon. As far as the shape goes it's basically stacking rectangles. The turret contains The cannon-lid, gun and base.

<div class="turret">
    <div class="cannon_lid"></div>
    <div class="gun"></div>
    <div class="turret_base"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.turret{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;

    margin-right: 40px;
    margin-bottom: -280px;

}

.cannon_lid{
    width: 80px;
    height: 10px;
    border:4px white solid;
    margin-bottom: 32px;
    margin-left: 11px;
        position: absolute;
        z-index: 1;
        background: var(--sweaterblue);
}

.gun{
    width: 60px;
    height: 5px;
    background: white;
    position: absolute;
    margin-bottom: 32px;
    margin-left: 125px;
}

.turret_base{
    width: 30px;
    height: 40px;
    border: 4px white solid;
    border-top: 4px white dotted;
    position: absolute;
    margin-top: 40px;
}
Enter fullscreen mode Exit fullscreen mode

Empire

The Empire side of image is an AT-AT or Imperial Walker. It's a tank that walks. It made of the head, body, and legs.

<div class="empire">
    <div class="at-at">
        <div class="at-at_main">
            <div class="at-at_head"></div>
            <div class="at-at_neck"></div>
            <div class="at-at_body"></div>
            <div class="at-at_hanger"></div>
        </div>
         </div>

    <div class="legs_group">/div>
</div>

Enter fullscreen mode Exit fullscreen mode
.at-at{
    display: grid;
    justify-content: center;
    align-items: center;
    position: relative; 
    background: var(--sweaterblue);
    margin-top: 145px;
}

.at-at_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; 
    position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

The head and body parts are rectangles moved around a bit. The legs are what took more of the work. They had to be grouped in parts and rotated. First they work grouped by upper and lower legs, the paired by front and back legs.

<div class="legs_group">
    <div class="upper">
        <div class="front"></div>
    <div class="back"></div>
    </div>

    <div class="lower">
        <div class="front"></div>
        <div class="back"></div>
    </div>

 </div> 

Enter fullscreen mode Exit fullscreen mode

The legs all start with the leg class and are the same shape. Some of the upper legs get another class called bent. This uses transform: rotate to change the leg shape. If a leg is bent then the lower part of the leg gets the lowerbent class, which just moves that part of the leg forward.

.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

.lowerbent{
    margin-left: -10px;
}

Enter fullscreen mode Exit fullscreen mode

<div class="legs_group">
    <div class="upper">
        <div class="front">
        <div class="legs bent"></div>
        <div class="legs"></div>
    </div>
    <div class="back">
        <div class="legs bent"></div>
        <div class="legs"></div>
    </div>
    </div>

    <div class="lower">
        <div class="front">
        <div class="legs lowerbent"></div>
        <div class="legs"></div>
        </div>
        <div class="back">
        <div class="legs lowerbent"></div>
        <div class="legs"></div>
        </div>
    </div>

 </div>
Enter fullscreen mode Exit fullscreen mode

Final Image

line drawing of a four legged armored tank from Star Wars

Conclusion

This one was a challenge. I learned that I should remove my pseudo code before I blog. When I planned this out I marked legs are "legs", "upper", "bent". Lowerbent", "lowerleg", and straight. I didn't make classes for all of those. Some were already covered by their parent class.

Thank you for reading.

👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay