대화식 양식 작성: CSS 이미지

Note: There are unlimited ways of drawing a character. This is my character and my way to draw it. It is simple to animate and easy to draw (which is convenient for a tutorial). You can make a character as complex and complete as you like, and using the technology that you want. Own your character, don't limit yourself to this example.

이 글에서 우리는 CSS에서 만화의 얼굴을 그리는 방법을 설명하고 발생할 수 있는 모든 질문에 대답할 것이다.예를 들면...

왜 SVG가 아닌 CSS 이미지입니까?

이것은 아주 좋은 문제입니다. 질문해 주셔서 감사합니다. 불행히도 명확한 답이 없습니다.SVG는 CSS보다 드로잉에 더 적합합니다. 주로 SVG는 드로잉을 위해 설계된 것이지 CSS가 아니기 때문입니다...그러나 간단한 그래픽에 CSS를 사용하는 데는 다음과 같은 장점이 있습니다.

별도의 학습이 필요하지 않습니다(여전히 SVG를 배워야 합니다. 재미있기 때문입니다).

SVG와 마찬가지로 경량급 및 확장성입니다.

일부 브라우저에서 SVG의 애니메이션을 완전히 지원하지 않음GreenSock

또 하나의 이기적인 이유: 이것은 나의 강좌다!나는 간단함을 유지하고 새로운 개념을 도입하지 않기를 바란다.저는 CSS 드로잉을 좋아하기 때문에 이 강좌를 위해 작은 것을 만드는 것이 좋습니다.
우리 정상 궤도로 돌아가자...

디자인 역할

이 사람은 벡터처럼 보이는 캐릭터로 주로 원과 직사각형으로 구성된다(check this article for the many shapes of CSS:

목과 셔츠는 직사각형

물체는 타원이 될 것이다

다른 모든 것은 기본적으로 둥글다. 머리, 귀, 눈...심지어 입까지!

Note: add eyebrows to your character. They give a ton of expression and personality to the drawing (even more when animated). I kind of regret not adding them to mine.

이것은 우리가 해야 할 일의 모델이다.

이것은 HTML 코드입니다.

  <figure aria-hidden="true">
    <div class="person-body"></div>
    <div class="neck skin"></div>
    <div class="head skin">
      <div class="eyes"></div>
      <div class="mouth"></div>
    </div>
    <div class="hair"></div>
    <div class="ears"></div>
    <div class="shirt-1"></div>
    <div class="shirt-2"></div>
  </figure>

우리는 그림에 aria-hidden="true" 을 추가했다. 그것은 단지 장식적인 것이기 때문에, 우리는 그것이 화면 리더에 의해 무시되기를 바란다. (이것은 읽을 수 있는 내용이 없고, 만일을 대비할 뿐이다.)
우리 캐릭터의 다른 부분은 뒤에서 앞까지의 순서에 따라 조직된다. 사람의 몸은 배경에 있고 셔츠는 위에 있다.모든 물건은 숨겨진 동그라미가 있는 동그라미 figure 에 싸여 있다.

역할 그리기

우리는 CSS 그림의 모든 내용을 이야기하지 않을 것입니다. (아래 바이올린에서 코드를 볼 수 있습니다.) 그러나 일부 부분은 재미있거나 더 깊은 해석이 필요할 수 있습니다. 우리는 그것들을 깊이 연구할 것입니다.

캔버스 설정

드로잉의 캔버스 figure 를 사용하여 원형으로 만들고 오버플로우를 숨깁니다.그 밖에 우리는 위치를'상대적'으로 설정하여 절대 방식으로 다른 요소를 포지셔닝할 수 있도록 한다. (아래에서 설정한다.)
다음은 figure CSS입니다.

figure {
  --skinH: 30;
  --skinS: 100%;
  --skinL: 87%;
  --hair: rgb(180, 70, 60);
  background: hsl(var(--fgColorH), calc(var(--fgColorS) * 2), 95%);
  border: 1px solid rgba(0, 0, 0, 0.0625);
  border-radius: 50%;
  height: 0;
  margin: auto auto;
  margin-bottom: 2rem;
  order: 1;
  overflow: hidden;
  padding-top: 60%;
  position: relative;
  width: 60%;
}

figure div {
  position: absolute;
  transform: translate(-50%, -50%);
}

우리는 HSL 및 CSS 변수를 두 배로 사용합니다.피부 색깔을 바꾸는 데 편리할 수도 있다.캐릭터는 흰색이지만 조명을 업데이트하거나 피부가 깊다는 백분율을 표시하거나 색조를 조정할 수 있다.

머리털

모든 다른 요소는 요소로 직접 그려서 모양을 부여하지만 머리카락은 특수하다.
이 경우 모양은 머리카락을 제한하는 데 사용되고, 위조 요소는 사용 box-shadow (오른쪽과 왼쪽에 사용) 머리카락 자체를 그리는 데 사용된다.

figure .hair {
  top: 40%;
  left: 50%;
  width: 66.66%;
  height: 66.66%;
  border-radius: 100%;
  overflow: hidden;
}

figure .hair::before {
  background: var(--hair);
  border-radius: 50%;
  box-shadow: 4rem 0 var(--hair);
  content: "";
  display: block;
  height: 100%;
  left: -50%;
  position: absolute;
  top: -60%;
  width: 100%;
}

마찬가지로 CSS 변수는 코드의 일부분을 변경하여 머리카락 색깔을 쉽게 변경할 수 있다.

주둥이

입이 좀 재밌어요.CSS로 그리는 많은 사람들은 원선을 원한다면 원을 그리고 테두리만 추가합니다.이것은 매우 좋지만 몇 가지 문제가 있다. 만약 다른 경계를 지정하지 않았다면, 그것들은 0이 되고, 우리의 선의 가장자리는 얇아질 것이다.
나는 정말 그런 것을 좋아하지 않는다.반대로 나는 요소에 투명 테두리를 추가하고 사용할 테두리의 색을 바꾸는 것을 더 좋아한다.이렇게 되면 이 선의 폭은 항상 같다. (일부 사람들에게는 이 선이 너무 갑작스럽게 끝날 수도 있지만)

figure .head .mouth {
  border: 0.125rem solid transparent;
  border-bottom: 0.125rem solid var(--borderDarker);
  width: 25%;
  border-radius: 50%;
  transition: all 0.5s;
  top: 75%;
  left: 50%;
  height: 10%;
}

셔츠

셔츠에 대해 우리는 두 개의 기울어진 직사각형을 사용하는데, 하나는 상대적이다.이 부분의 코드는 그다지 어렵지 않거나 흥미롭지는 않지만, 이전에 CSS에 선택기를 조합하지 않았거나, 한 속성에 여러 개의 변환을 적용하는 방법을 알고 있었다면 볼 만하다.

figure .shirt-1,
figure .shirt-2 {
  width: 12%;
  height: 7%;
  background: hsl(var(--bgColorH), var(--bgColorS), var(--bgColorL));
  top: 76%;
  left: 36.5%;
  transform: skew(-10deg) rotate(15deg);
}

figure .shirt-2 {
  left: 52.5%;
  transform: skew(10deg) rotate(-15deg);
}

눈의 애니메이션 설정

지금까지 우리의 역할은 정적이다. 그것은 전혀 움직이지 않고 정지된 이미지처럼 보인다.이를 변경하기 위해 혼합에 CSS 애니메이션을 추가합니다.우리는 우리의 배역을 윙크하게 할 것이다.이것은 간단한 일이다. 눈의 높이를 조절하는 것이다. 그러나 그것은 우리의 작은 그림을 생동감 있게 만들 것이다.
이것은 깜박이는 애니메이션의 CSS입니다.

@keyframes blink {
  0%, 90%, 100% {
    height: 10px;
  }
  95% {
    height: 0px;
  }
}

figure .head .eyes::before,
figure .head .eyes::after {
  animation: blink 5s infinite;
}

너는 지금 아마도 "헤이! 너는 곳곳에서 백분율과 rem을 사용하는데 왜 애니메이션은 픽셀을 사용하니?"라고 말할 것이다.이것은 또 다른 좋은 문제다.Safari에서 테스트할 때 rem 를 사용할 때 애니메이션은 예상대로 작동하지 않지만 px 등 효과가 좋은 애니메이션으로 변경됩니다.이것은 애니메이션이나 특히 위조 요소 애니메이션에서 Safarirem 단원의 오류일 수 있습니다.어쨌든 픽셀을 사용하면 이 문제를 해결할 수 있다.
애니메이션 CSS 역할을 사용하면 양식이 다음과 같이 표시됩니다.
우리는 HTML에 추하지만 기능이 강한 폼을 가지고 있으며, CSS를 사용하여 그 위에 스타일과 우호적인 캐릭터를 추가했다.자바스크립트로 우리 손을 더럽히고 모든 걸 연결할 때가 됐어...그 다음에 CSS에서 마지막 윤색을 하고 반환 상호작용을 추가합시다.