어글리 스웨터 CSS: Lars Homestead

여기는 Tatooine에 있는 Lars Homestead입니다. 오웬 라스, 베루 라스, 루크 스카이워커의 집.

지난 몇 년 동안 저는 LEGO Figure 어글리 스웨터의 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 다리를 파악하는 데 더 많은 시간이 걸렸습니다. 일단 시작하고 나니 빌드가 훨씬 빨라졌습니다.

위 내용은 어글리 스웨터 CSS: Lars Homestead의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!