Ugly Sweater CSS: Lars Homestead

Dies ist das Lars Homestead auf Tatooine. Heimat von Owen und Beru Lars und Luke Skywalker.

In den letzten Jahren habe ich CSS-Kunstversionen der hässlichen Pullover der LEGO-Figur erstellt. Siehe das Vorjahr unter den Serienlinks. Dieser 2024 Ugly Sweater zeigt Luke und das Gehöft, auf dem er aus dem ursprünglichen Star Wars-Film aufgewachsen ist.

Ich habe mit meiner Pullover-Vorlage aus den Vorjahren begonnen. Es gibt einen einfachen Oberkörper. Innentorso in der für diesen Pullover vorgestellten Figur. Innerhalb der InnerSweater-Abteilung befinden sich die verschiedenen Teile des Lars-Hauses.

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

Die flex-direction:column; ermöglicht es, die Teile des Gehöfts in einer Reihe auf dem Bildschirm anzuzeigen.

Haus

Das Haus und seine Teile sind modifizierte Rechtecke. Durch Anpassen der Randradien erhielten die Rechtecke oben Kurven. Die unteren Ränder wurden transparent gemacht, sodass sie nicht auf dem Bildschirm erscheinen.

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

Feuchtigkeitsverdampfer

Der Moisture Vaporator besteht aus einer Reihe von Linien und Kästen.

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

Doppelsonnen

Die Sonnen sind mehr übereinander gestapelte und gedrehte Rechtecke.

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

Einpacken

Dies war ein einfacherer Aufbau als der Echo-Basispullover. Es dauerte länger, die AT-At-Beine herauszufinden. Der Aufbau ging viel schneller, als ich anfing.

Das obige ist der detaillierte Inhalt vonUgly Sweater CSS: Lars Homestead. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!