못생긴 스웨터 CSS: 차일드

지난번에 레고 피규어를 기반으로 만들었습니다. 이번에는 무화과가 아니라 스웨터 디자인을 재사용하고 새로운 캐릭터를 추가했습니다.

스웨터

스웨터는 BB-8 포스트에 있는 것과 거의 동일하므로 다시 깊이 들어가지 않겠습니다. 유일한 변화는 솔기를 검은색에서 흰색으로 바꾸는 것뿐이었습니다. NONFUNCTIONAL 코드를 재사용하거나 튜토리얼 변경 사항을 따르는 경우 팁을 디자인하십시오. 항상 무엇을 할 수 있는지 탐색하십시오.

코드 재사용

BB-8의 바닥은 구체입니다. 코드의 해당 부분을 다른 캐릭터에 재사용할 수 있다는 것을 알았습니다. border-radius를 변경하여 모양을 변경했습니다. 전체적으로 50%였습니다. 나는 그것을 위에서 제거하여 그 부분을 평평하게 만들었습니다. 아래쪽은 여전히 ​​border-radius가 적용되어 있으므로 둥글게 처리됩니다.

 <div class="cradleBody">

 </div> 

.cradleBody {
    background-color: white;
    height: 50px;
    width: 120px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    border: 2px solid black;
    border-top: 0;
    overflow: visible;
    flex-direction: column;
}

다음으로 크래들의 가장자리를 표시하기 위해 직사각형을 추가했습니다.

           <div class="cradleBody">
            <div class="cradleLip"></div>
           </div> 

.cradleLip {
    background-color: white;
    height: 12px;
    width: 128px;
    border: 2px solid black;
    margin-top: -66px;

}

외계인

다음으로 두 개의 직사각형 childRobe 및 childRobeCollar 에서 본체를 만들었습니다. 나는 아이의 손을 위해 블록을 잡기 위해 아래쪽을 사용했습니다. justify-content: space-between;는 바늘이 childRobe의 양쪽 끝에 고정되도록 했습니다. 경계선이 없어 몸과 잘 어우러집니다.

       <div class="childRobeCollar"></div>
       <div class="childRobe">
        <div class="childHands"></div>
        <div class="childHands"></div>
       </div>

.childRobe {
    background-color: #d7bfa6;
    height: 40px;
    width: 88px;
    margin-top: -70px;
    margin-right: -108px;
    display: flex;
    justify-content: space-between;
}

.childRobeCollar {
    background-color: #d7bfa6;
    height: 50px;
    width: 94px;
    margin-top: -90px;
    margin-right: -92px;
    border-top-left-radius: 34%;
    border-top-right-radius: 34%;
    border: 1px solid black;
}

그리고 나는 머리를 형성 할 것입니다

다음 머리: 머리는 border-radius 로 수정된 두 개의 직사각형으로 구성됩니다. 귀는 여백을 조정하여 head div 아래로 이동한 하나의 긴 직사각형입니다. 그런 다음 머리가 위에 앉습니다. 그런 다음 눈은 약간의 표현을 추가합니다.

Child와 cradle은 The child라는 div에 싸여 있습니다. filter: drop-shadow(0 0 1.5rem white)는 캐릭터에 글로우 효과를 줍니다.

            <div class="childEars"></div>
        <div class="childHead">
            <div class="childEyes">
                <div class="pupil"></div>
            </div>
            <div class="childEyes">
                <div class="pupil"></div>
            </div>
        </div>

.childHead {
    background-color: #88af90;
    height: 40px;
    width: 60px;
    border: 1px solid black;
    margin-top: -150px;
    margin-right: -76px;
    border-top-left-radius: 34%;
    border-top-right-radius: 34%;
    display: flex;
    justify-content: space-evenly;
    overflow: visible;
}

.childEyes {
    background-color: black;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center; 
}


.pupil {
    background-color: white;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: -4px;
}

마지막 단계는 크래들에 뒷면을 추가하는 것입니다. 요람 본체에 사용한 것과 같은 두 개의 반원입니다. 좋은 배경이 될 때까지 높이와 너비를 조정했습니다.



그리고 CSS로 만든 Child의 최종 버전이 있습니다. 이것은 당신이 그것을 즐겼기를 바라는 또 다른 재미있는 빌드였습니다.

업데이트: 1년 후 저는 색 구성표를 훨씬 더 화려하게 변경했습니다. 그것을 참조하십시오

-$JarvisScript git push