CSS의 루이지

항상 두 번째 바이올린인 Luigi는 약간의 사랑을 받을 자격이 있습니다. 이 위대한 dribble illustration에서 영감을 받아 일련의 타원을 사용하여 아래 CSS에서 Luigi를 어떻게 재현했는지 확인하십시오.



이것은 원래 codinhood.com에 게시되었습니다.

루이지의 모자 CSS

모자의 모든 세부 사항을 제거하면 본질적으로 바닥이 더 두꺼운 뚱뚱한 달걀 모양이 됩니다. border-radius 속성에 8개의 값을 제공하여 CSS에서 이 모양을 만들 수 있습니다. 이를 통해 각 모서리border-radius의 높이와 너비를 사용자 지정할 수 있습니다. 이 기술에 대한 자세한 내용은 W3C spec on border-radius을 확인하십시오.

<div class="Luigi">
  <div class="Luigi__hat"></div>
</div>

.Luigi {
  height: 400px;
  width: 400px;
  position: relative;
}
.Luigi__hat {
  margin-left: calc(50% - 125px);
  height: 250px;
  width: 250px;
  background: #1ca42f;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}

루이지 모자 로고 CSS

대문자 "L"로고는 "L"의 줄기와 가지가 모두 크기가 다르고 한쪽 끝이 두껍고 약간 회전하기 때문에 보이는 것보다 조금 더 복잡합니다. 이것을 올바르게 보이게 하려면 몇 번의 반복과 의사 요소가 필요했습니다.

<div class="Luigi__hat">
  <div class="Luigi__logo">
    <div class="Luigi__stem"></div>
    <div class="Luigi__branch"></div>
  </div>
</div>

.Luigi__logo {
  background: white;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  left: calc(50% - 40px);
  top: 25px;
  position: absolute;
}
.Luigi__stem {
  position: absolute;
  top: 8px;
  left: calc(50% - 15px);
  height: 45px;
  width: 16px;
  background: #1ca42f;
  border-radius: 1px;
}
.Luigi__stem::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 12px;
  top: -1px;
  background: white;
  transform: rotate(-5deg);
}
.Luigi__stem::after {
  content: "";
  position: absolute;
  height: 40px;
  width: 5px;
  top: 0px;
  left: 12.33px;
  background: white;
  transform: rotate(3deg);
}
.Luigi__branch {
  position: absolute;
  top: 45px;
  left: 25px;
  height: 11px;
  width: 33px;
  background: #1ca42f;
  border-radius: 1px;
}
.Luigi__branch::before {
  content: "";
  position: absolute;
  height: 3px;
  width: 20px;
  top: -2px;
  left: 11.5px;
  background: white;
  transform: rotate(-5deg);
}

루이지의 모자 CSS

캡은 캡 "내부"에 있는 듯한 착시를 주기 위해 안쪽이 더 어두운 타원형 모양입니다. 착시는 우리가 거기에 들어가기 전까지는 실제로 작동하지 않지만 모자에 깊이의 착시를 제공하는 데 도움이 되도록 로고의 흰색 부분과 겹쳐야 합니다.

<div class="Luigi__hat">
  <div class="Luigi__logo">
    <div class="Luigi__stem"></div>
    <div class="Luigi__branch"></div>
  </div>
  <div class="Luigi__cap "></div>
</div>

.Luigi__cap {
  position: absolute;
  left: calc(50% - 85px);
  top: 105px;
  width: 170px;
  height: 140px;
  border-radius: 50%;
  background: #025a10;
  box-shadow: 0 -0.8em 0 0 #32b744;
}

루이지의 귀 CSS

Luigi의 귀는 양쪽에 특정 border-radius 가 있는 타원형입니다. 얼굴에 가장 가까운 귀 쪽은 덜 둥글고 귀 바깥쪽은 더 둥글다. border-radius 줄임말을 사용하여 타원의 각 모서리를 정의하여 아래와 같이 이 모양을 만들 수 있습니다.

<div class="Luigi">
  <div class="Luigi__ear Luigi__ear--left"></div>
  <div class="Luigi__ear Luigi__ear--right"></div>
  ...
</div>

.Luigi__ear {
  background: #f8ccb3;
  width: 50px;
  height: 75px;
  left: 80px;
  top: 200px;
  position: absolute;
  border-radius: 50% 40% 40% 90%;
  overflow: hidden;
}
.Luigi__ear--right {
  left: 270px;
  border-radius: 40% 50% 90% 40%;
}

.Luigi__ear--left::after {
  content: "";
  height: 60px;
  width: 40px;
  background: #e5b69b;
  position: absolute;
  right: -5px;
  top: 5px;
  border-radius: 50% 40% 40% 90%;
}

.Luigi__ear--right::after {
  content: "";
  height: 60px;
  width: 40px;
  background: #e5b69b;
  position: absolute;
  left: -5px;
  top: 5px;
  border-radius: 40% 50% 90% 40%;
}

루이지의 얼굴 CSS

바라건대, 이 시점에서 Luigi의 얼굴을 만들기 위해 border-radius가 있는 타원을 사용할 것이라는 점을 깨달았을 것입니다. 이 경우 귀하의 말이 맞습니다. 혼합되지 않는 수직선linear-gradient을 추가하여 5시 그림자를 만들 수 있습니다.

<div class="Luigi">
  ...
  <div class="Luigi__face"></div>
</div>

.Luigi__face {
  background-image: linear-gradient(to bottom, #f8ccb3 50%, #ecb494 50%);
  height: 250px;
  width: 175px;
  position: absolute;
  top: 115px;
  left: calc(50% - 87.5px);
  border-radius: 100%;
  z-index: 1;
}

루이지의 눈썹 CSS

Luigi의 눈썹은 본질적으로 측면에서 매우 빠르게 가늘어지는 뚱뚱한 호입니다. 먼저 CSS에서 일반 원을 만들어 CSS에서 이 효과를 만들 수 있습니다.



그런 다음 첫 번째 원과 겹치는 다른 원을 만듭니다.



그런 다음 겹치는 원을 배경 색상과 일치하도록 변경하여 원래 원을 "잘라내는"효과를 만듭니다.



첫 번째 원과 겹치는 두 번째 원은 ::after 의사 요소로 생성되지만 다른 전체 요소를 쉽게 만들 수 있습니다.

<div class="Luigi__eyebrow"></div>
<div class="Luigi__eyebrow Luigi__eyebrow--right"></div>

.Luigi__eyebrow {
  width: 40px;
  height: 43px;
  border-radius: 100%;
  background: #2e0400;
  position: absolute;
  left: 37px;
  top: 10px;
  transform: rotate(10deg);
}
.Luigi__eyebrow::after {
  content: "";
  background: #f8ccb3;
  position: absolute;
  bottom: -10px;
  left: 3px;
  height: 40px;
  width: 45px;
  border-radius: 100%;
}
.Luigi__eyebrow--right {
  left: 97px;
  transform: rotate(-10deg);
}
.Luigi__eyebrow--right::after {
  right: 4px;
  left: auto;
}

루이지 아이즈 CSS

눈은 실제로 특정 위치에서 다른 색상을 가진 중첩된 타원형(아직 패턴이 보입니까?)입니다.

<div class="Luigi__eye">
  <div class="Luigi__iris">
    <div class="Luigi__pupil"></div>
  </div>
</div>
<div class="Luigi__eye Luigi__eye--right">
  <div class="Luigi__iris Luigi__iris--right ">
    <div class="Luigi__pupil Luigi__pupil--right"></div>
  </div>
</div>

.Luigi__eye {
  background: white;
  height: 70px;
  width: 45px;
  border-radius: 100%;
  position: absolute;
  left: 35px;
  top: 40px;
  overflow: hidden;
  z-index: 2;
}
.Luigi__eye--right {
  left: 95px;
}
.Luigi__iris {
  width: 35px;
  height: 55px;
  background: #2ba7d1;
  border-radius: 100%;
  right: -2px;
  bottom: 7px;
  position: absolute;
}

.Luigi__iris--right {
  left: -2px;
  right: auto;
}

.Luigi__pupil {
  width: 23px;
  height: 40px;
  background: black;
  border-radius: 100%;
  right: 4px;
  bottom: 7px;
  position: absolute;
}
.Luigi__pupil::before {
  content: "";
  position: absolute;
  background: white;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  left: 5px;
  top: 5px;
}
.Luigi__pupil--right {
  right: auto;
  left: 4px;
}

루이지의 코 CSS

Luigi의 코는 이 이미지에 있는 대부분의 다른 요소와 마찬가지로 각 측면에 대해 값이 약간 다른border-radius 타원형입니다. 약간의 깊이를 만들기 위해 코를 눈 위에 위치시킵니다.

<div class="Luigi">
  ...
  <div class="Luigi__nose"></div>
  ...
</div>

.Luigi__nose {
  width: 84px;
  height: 84px;
  border-radius: 50% 50% 60% 60%;
  background: #f6b996;
  position: absolute;
  left: calc(50% - 42px);
  top: 86px;
  z-index: 3;
}

루이지의 콧수염 CSS

얼굴의 가장 중요한 부분인 콧수염에 도달했습니다. 콧수염은 전체 이미지를 한 데 모으기 때문에 제대로 하는 것이 중요합니다. 타원형으로 시작하겠습니다.



그런 다음 multiple box-shadows 을 사용하여 주 타원의 양쪽에 두 개의 큰 타원을 더 만들 것입니다. 배치를 보려면 이미지를 확인하십시오.

box-shadow: -2.25em 1em 0 red, 2.25em 1em 0 blue;

파란색과 빨간색은 모양을 더 잘 구분할 수 있도록 자리 표시자일 뿐입니다. 다음으로, 상단에 있는 세 개의 타원을 모두 가로지르는 또 다른 타원을 만들 것입니다. 이 타원은 Luigi의 피부와 같은 색상을 가지며 두 개의 타원box-shadow은 콧수염 색상으로 변경되어야 합니다.



상단 타원은 Luigi의 코 양쪽에 있는 피부와 혼합되어 그의 눈썹과 유사하게 타원을 잘라낸 듯한 착각을 줍니다. 마지막으로 콧수염을 코 아래, 턱 위에 배치해야 합니다.

<div class="Luigi__mustache"></div>

.Luigi__mustache {
  position: absolute;
  top: 73px;
  left: calc(50% - 55px);
  height: 96px;
  width: 110px;
  border-radius: 50%;
  background: #2e0400;
  box-shadow: -2.25em 1em 0 #2e0400, 2.25em 1em 0 #2e0400;
}

.Luigi__mustache::after {
  content: "";
  position: absolute;
  top: 0em;
  left: calc(50% - 85px);
  height: 60px;
  width: 170px;
  border-radius: 50%;
  background: #f8ccb3;
}

이 CSS 데모가 마음에 들면 Draw and Animate Bender's Face with CSS 또는 Animate Octocat swimming with CSS 도 좋아할 것입니다.