CSS Sweater Hodoh: Lars Homestead

Ini ialah Lars Homestead di Tatooine. Rumah Owen dan Beru Lars dan Luke Skywalker.

Sejak beberapa tahun kebelakangan ini saya telah membuat versi seni CSS bagi baju sejuk Lego Figure. Lihat tahun sebelumnya di bawah pautan siri. Sweater Ugly 2024 ini menampilkan Luke dan homestead tempat dia dibesarkan daripada filem Star Wars yang asal.

Saya bermula dengan templat sweater saya dari tahun-tahun sebelumnya. Terdapat batang tubuh asas. Bahagian dalam badan dalam watak yang diketengahkan untuk sweater ini. Di dalam div InnerSweater terdapat pelbagai bahagian rumah 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;
}

Arah lentur:lajur; membolehkan bahagian homestead jatuh dalam barisan merentasi skrin.

rumah

Rumah dan bahagiannya adalah segi empat tepat yang diubah suai. Dengan melaraskan jejari sempadan, segi empat tepat diberi lengkung di bahagian atas. Sempadan bawah dibuat lutsinar supaya tidak kelihatan pada skrin.

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

Pengewap Kelembapan

Moisture Vaporator ialah satu siri garisan dan kotak.

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

Dwi Matahari

Matahari lebih berbentuk segi empat tepat disusun dan diputar di atas satu sama lain.

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

Bungkus

Ini adalah binaan yang lebih mudah daripada sweater asas Echo. Ia mengambil lebih banyak masa untuk mengetahui kaki AT-At. Pembinaan berjalan lebih cepat sebaik sahaja saya mula.

Atas ialah kandungan terperinci CSS Sweater Hodoh: Lars Homestead. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!