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.

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>





<pre class="brush:php;toolbar:false">.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;
}

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>





<pre class="brush:php;toolbar:false">.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;
}

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>





<pre class="brush:php;toolbar:false">.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;
}

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>



<p>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.<br>
</p>

<pre class="brush:php;toolbar:false">.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

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

<div>



<h2>
  
  
  Final Image
</h2>

<p><img src="https://img.php.cn/upload/article/000/000/000/173526811541121.jpg" alt="Ugly Sweater CSS: Echo Base"></p>

<h2>
  
  
  Conclusion
</h2>

<p>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.</p>

<p>Thank you for reading.  </p>


          

            
  

            
        

The above is the detailed content of Ugly Sweater CSS: Echo Base. For more information, please follow other related articles on the PHP Chinese website!