Chandail laid CSS : Lars Homestead

Voici la propriété Lars sur Tatooine. Maison d'Owen et Beru Lars et Luke Skywalker.

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 Luke et la ferme où il a grandi dans le film Star Wars original.

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 de la division InnerSweater se trouvent les différentes parties de la maison de Lars.

<div>





<pre class="brush:php;toolbar:false">.InnerSweater {
    width: 900px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 50px;
    column-gap: 40px;
}

.wrapper {
    width: 100%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

Le flex-direction:column; permet aux parties de la propriété de s'aligner sur l'écran.

Maison

La Maison et ses parties sont des rectangles modifiés. En ajustant les rayons des bordures, les rectangles ont reçu des courbes en haut. Les bordures inférieures ont été rendues transparentes afin qu'elles n'apparaissent pas à l'écran.

.house {
    width: 230px;
    height: 170px;
    background: var(--sweatergreen);
    border: 8px white double;
    border-top-right-radius: 40%;
    border-top-left-radius: 40%;
    margin-right: 580px;
    margin-top: 235px;
    position: absolute;
    border-bottom-color: transparent;
    display: flex;
    overflow: visible;
    justify-content: space-around;
}

.houseBack {
    width: 30px;
    height: 85px;
    background: var(--sweatergreen);
    border: 4px white solid;
    border-bottom-color: transparent;
    border-top-left-radius: 40%;
    margin-left: -21px;
    margin-top: 85px;
    position: relative;
}

.housefront {
    width: 120px;
    height: 110px;
    background: var(--sweatergreen);
    border: 4px white double;
    border-top-right-radius: 40%;
    border-top-left-radius: 40%;
    margin-left: 166px;
    margin-top: 60px;
    position: relative;
    border-bottom-color: transparent;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    overflow: hidden;
}

.door{
    width: 50px;
    height: 100px;
    background-color: var(--SweaterDarkRed);
    margin-top: 24px;
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
}

Vaporisateur d'humidité

Le Moisture Vaporator est une série de lignes et de boîtes.

        <div>





<pre class="brush:php;toolbar:false">.post {
    width: 40px;
    height: 100px;
    background: var(--sweatergreen);
    border: 4px white solid;
    border-bottom-color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
}

.line {
    width: 6px;
    height: 100px;
    background: white;
    position: relative;
}

Deux soleils

Les soleils sont davantage de rectangles empilés et tournés les uns sur les autres.

<div>





<pre class="brush:php;toolbar:false">.sun1 {
    width: 50px;
    height: 100px;
    background: var(--SweaterDarkRed);
    position: absolute;
}
.sun1_mid {
    width: 70px;
    height: 80px;
    background: var(--SweaterDarkRed);
    position: absolute;
}
.sunRotate{
    transform: rotate(90deg);
    width: 60px;
}

Conclure

C'était une construction plus facile que le pull de base Echo. Il a fallu plus de temps pour comprendre les jambes AT-At. La construction est allée beaucoup plus vite une fois que j'ai commencé.

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!