يوم سترة قبيح هو الجمعة الثالثة من ديسمبر. هذا العام هو 20 ديسمبر. تعرف على يوم السترة القبيحة في صفحة التقويم الوطني لليوم ..

على مدار السنوات القليلة الماضية ، قمت بعمل إصدارات فنية CSS من سترات LEGO القبيحة. راجع العام السابق تحت روابط السلسلة. تتميز هذه السترة القبيحة 2024 ليا و Battle of Echo Base من The Empire Strikes Back.

بدأت مع قالب سترة من السنوات السابقة. هناك جذع أساسي. داخل الجذع في الشخصية المميزة لهذه السترة. داخل شخصية Div هي جانبي المتمردين والإمبراطورية. داخل تلك divs هي مركبات المعركة.

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





  
  
  المتمردون


 يتميز الجانب المتمرد بمدفع. بقدر ما يذهب الشكل ، فإنه يتراوح بشكل أساسي. يحتوي البرج على المدفع والبندقية والقاعدة. 









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





  
  
  إمبراطورية


 الجانب الإمبراطورية من الصورة هو at-at أو walker الإمبراطوري. إنه خزان يمشي. لقد صنعت من الرأس والجسم والساقين. 









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












  
  
  الصورة النهائية


  


  
  
  خاتمة


 كان هذا التحدي. تعلمت أنه يجب علي إزالة رمز الزائفة قبل أن أدون. عندما خططت لهذا الساقين ، كانت الساقين هي "أرجل" ، "أعلى" ، "عازمة". LowerBent "،" Lowerleg "، ومستقيم. لم أصنع دروسًا لجميع هؤلاء. بعضها تم تغطيته بالفعل من قبل فئة الوالدين. 

 شكرًا لك على القراءة.