CSS의 오즈의 마법사

오즈의 멋진 마법사는 최근에 읽은 책 중 하나입니다. 그래서 8가지 색상과 HTML, CSS만으로 이야기의 주인공을 미니멀/벡터 방식으로 그리기로 했습니다.

다음은 demo on Codepen입니다.



저는 그림을 단순하고 최소한으로 유지하려고 노력했습니다. 그래서 각 캐릭터에는 4개의 섹션만 있습니다.

겁쟁이 사자: 갈기, 얼굴, 귀, 코.

도로시: 얼굴, 머리, 드레스, 머리 활.

허수아비: 모자, 얼굴, 넥타이, 짚.

Tin Woodman: 모자, 얼굴, 턱, 나비 넥타이.

clip-path 함수를 사용하여 polygon() 으로 그림을 그립니다. 그래서 이 과정은 정사각형에서 원하는 모양으로 조각하는 것과 조금 비슷했습니다. 편집 소프트웨어를 사용하지 않고 모두 손으로 생성했다는 점을 고려할 때 작은 도전이었습니다(아래 video 참조).

/* Cowardly Lion's mane */
.lion .mane {
  background: var(--orange);
  clip-path: polygon(
    50% 5%, 73% 8%, 87% 40%, 85% 80%, 70% 95%, 
    65% 93%, 60% 98%, 55% 95%, 50% 100%, 45% 95%, 
    40% 98%, 35% 93%, 30% 95%, 15% 80%, 13% 40%, 27% 8%
  );
}

도면의 CSS 코드 예

작은 애니메이션으로 그림이 완성됩니다. 각 캐릭터 위로 마우스를 이동하면 마법사에게 묻고 싶은 내용이 표시됩니다. 각각 용기(별표), 집으로 가는 것(집), 뇌 및 심장이 표시됩니다.

결과가 좋아 보입니다. 도로시가 로켓 이륙하는 웬디스와 허수아비의 소녀와 닮았다는 것은 인정해야 하지만...

나중에 컨테이너<div>를 해당 캐릭터를 연기한 각 배우에 대한 링크로 교체하여 그림을 조금 더 인터랙티브하게 변경했습니다. You can see that version here .

전체적으로 전체 드로잉 프로세스는 약 1시간 30분 정도 소요되었습니다. 다음은 어떻게 진행되었는지에 대한 동영상입니다.