アグリー セーター CSS: ラーズ ホームステッド

ここはタトゥイーンのラーズ ホームステッドです。オーウェン、ベル・ラーズ、ルーク・スカイウォーカーの家。

ここ数年、私はレゴ フィギュアの醜いセーターの CSS アート バージョンを作成してきました。シリーズのリンクの下にある前年を参照してください。この 2024 年のアグリー セーターには、オリジナルのスター ウォーズ映画に登場するルークと彼が育った農場が登場します。

私は前年のセーターのテンプレートから始めました。基本的な胴体があります。このセーターの注目のキャラクターの胴体の内側。 InnerSweater div 内には、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;
}

flex-direction:column;農場の一部を画面上で一列にドロップできます。

家

家とその部品は変形された長方形です。境界線の半径を調整することで、長方形の上部に曲線が与えられました。下の枠線は画面上に表示されないように透明にしました。

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

水分蒸発器

モイスチャーベーポレーターは一連のラインとボックスです。

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

デュアルサンズ

太陽は、より多くの長方形が積み重ねられ、互いに回転して重ねられています。

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

まとめ

これは、エコーベースのセーターよりも簡単に構築できました。 AT-Atの足を理解するのにさらに時間がかかりました。ビルドを開始すると、ビルドがはるかに速く進みました。