Pull laid CSS : Echo Base

Le jour du pull laid est le troisième vendredi de décembre. Cette année, c'est le 20 décembre. Découvrez la Journée du pull laid sur la page du calendrier de la Fête nationale.

Ces dernières années, j'ai créé des versions artistiques CSS des pulls moches des figurines LEGO. Voir l'année précédente sous les liens des séries. Ce Ugly Sweater 2024 présente Leia et la base de la bataille d'Echo de The Empire Strikes Back.

J'ai commencé avec mon modèle de pull des années précédentes. Il y a un torse basique. Intérieur du torse dans le personnage vedette de ce pull. À l’intérieur du personnage div se trouvent les deux côtés de la bataille, Rebels et Empire. À l’intérieur de ces divs se trouvent les véhicules de la bataille.

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

Rebelles

Le côté rebelle comporte un canon. En ce qui concerne la forme, il s’agit essentiellement d’empiler des rectangles. La tourelle contient le couvercle du canon, le canon et la 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

Le côté Empire de l'image est un AT-AT ou Imperial Walker. C'est un tank qui marche. Il est composé de la tête, du corps et des jambes.

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

Les parties de la tête et du corps sont des rectangles légèrement déplacés. Ce sont les jambes qui ont demandé le plus de travail. Ils devaient être regroupés en plusieurs parties et tournés. Ils travaillent d'abord regroupés par jambes supérieures et inférieures, les jumelés par pattes avant et arrière.

<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>
  
  
  Image finale
</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>Celui-ci était un défi. J'ai appris que je devais supprimer mon pseudo-code avant de bloguer. Quand j'ai planifié cela, j'ai marqué les jambes comme étant "jambes", "supérieures", "courbées". Lowerbent", "lowerleg" et droit. Je n'ai pas fait de cours pour tous ceux-là. Certains étaient déjà couverts par leur classe parentale.</p>

<p>Merci d'avoir lu.  </p>


          

            
  

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!