CSS 할로윈 얼굴: Alien WIP

다음은 CSS와 HTML을 사용하여 만든 외계인입니다. 이것은 Cody Pearce의 . 나는 그의 튜토리얼을 따라 Bender에게 LEGO 미니 피그 얼굴을 만들었습니다. 나는 할로윈이기 때문에 여기에서 일부 생물을 만들지 않는 것이 내 첫 번째 외계인이라고 결정했습니다. 진행중인 작업입니다. 공유하면 계속할 동기가 될 것이라고 생각했습니다.



다음은 눈에 대한 코드입니다.

HTML

    <div class="eyes_pair">
            <div class="eye_socket">
               <div class="eyes">
                         <div class="catchlight">
                        <div class="pupil"></div>
                  </div>
                </div>
            <div class="eyes">
                <div class="catchlight">
                  <div class="pupil"></div>
                </div>
            </div>
            </div>              
        </div>

CSS

.eyes_pair {
    width: 400px;
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eye_socket {
    width: 375px;
    height: 125px;
    display: flex;
    justify-content: center;
}


.eyes {
    height: 145px;
    width: 145px;
    background: white;
    border-radius: 100%;
    border: solid 4px black;
    margin:-10px 10px 0px 10px;
    display: flex;
    justify-content: center;
    position: relative;
}

.pupil {
    width: 5px;
    height: 100px;
    margin-top: 5px;
    background: black;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

피부에 색상 그라디언트를 backrground-image로 추가한 약간 다른 버전입니다. 저울을 추가할 수 있는지 확인하려고 합니다.



CSS로 멋진 것을 만들어 본 적이 있습니까? 그것을 공유하십시오.

-$JarvisScript 자식 푸시