Hässlicher Pullover -Tag ist der dritte Freitag im Dezember. Dieses Jahr ist das 20. Dezember. Erfahren Sie mehr über den hässlichen Pullover -Tag auf der National Day Calendar -Seite ..

In den letzten Jahren habe ich CSS -Kunstversionen der LEGO -Figur hässliche Pullover gemacht. Siehe das Vorjahr unter den Links der Serie. Dieser hässliche Pullover von 2024 zeigt Leia und die Schlacht von Echo -Basis aus den Empire Streiks zurück.

Ich habe mit meiner Pullovervorlage aus den vergangenen Jahren angefangen. Es gibt einen einfachen Oberkörper. In den Torso im vorgestellten Charakter für diesen Pullover. In der Charakter Div befinden sich die beiden Seiten der Kampfrebellen und des Imperiums. In diesen Divs befinden sich die Fahrzeuge der Schlacht.

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





  
  
  Rebellen


 Die Rebellenseite verfügt über eine Kanone. Was die Form angeht, stapelt sie im Grunde die Rechtecke. Der Turm enthält die Kanonenblut, Waffe und Basis. 









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





  
  
  Reich


 Die Empire-Seite des Bildes ist ein AT-AT- oder Imperial Walker. Es ist ein Panzer, der geht. Es besteht aus Kopf, Körper und Beinen. 









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




 Die Kopf- und Körperteile sind Rechtecke, die sich ein wenig bewegt haben. Die Beine haben mehr von der Arbeit gekostet. Sie mussten in Teilen gruppiert und gedreht werden. Zuerst arbeiten sie nach oberen und unteren Beinen, die von vorderen und hinteren Beinen gepaart. 







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












  
  
  Endgültiges Bild


  


  
  
  Abschluss


 Dieser war eine Herausforderung. Ich habe gelernt, dass ich meinen Pseudo -Code entfernen sollte, bevor ich blogge. Als ich das plante, sind ich mit den Beinen "Beine", "obere", "gebogen". Lowerbent "," Lowerleg "und gerade. Ich habe für alle keine Klassen gemacht. Einige waren bereits von ihrer Elternklasse abgedeckt. 

 Danke fürs Lesen.