HTML과 CSS만으로 만든 10가지 캐릭터 디자인

CSS로 얼마나 많은 일을 할 수 있는지에 항상 놀라고 있습니다. 웹 개발자는 CSS를 사용하여 놀라운 페이지 레이아웃과 사용자 정의 애니메이션 효과를 만들 수 있다는 것을 알고 있습니다.

그러나 많은 재미있는 프로젝트에도 사용할 수 있습니다. 예를 들어 CSS만으로 캐릭터 디자인을 구축하는 것과 같습니다. 이상하게 들리죠?

확실히 그렇습니다. 그리고 100% 순수 HTML 및 CSS 코드로 만든 가장 이상하지만 가장 멋진 캐릭터 디자인을 수집했습니다.

1. 앵그리 버드

누가 Angry Birds를 좋아하지 않습니까? 게임으로 시작해 대중문화에 구멍을 뚫고 어떻게든 그들만의 영화를 얻었다.

그리고 Rachel Bull의 이 펜은 Angry Birds가 CSS로 들어가는 방법도 찾을 수 있음을 증명합니다.

아이러니하게도 이 페이지에는 하나의 이미지가 있으며 맨 위에 사용자 지정 유형을 포함하는 데 사용됩니다. 새의 곡선에서 사용자 정의 그라디언트에 이르기까지 다른 모든 요소는 모두 순수 CSS에서 실행됩니다.

아마도 가장 실용적인 코드 조각은 아니지만 확실히 영감을 얻었을 것입니다.

2. 프랑켄슈타인

Mary Shelley의 Frankenstein은 부활한 녹색 피부 생물로 널리 알려져 있습니다. 기술적으로는 Frankeinstein의 괴물 이지만 혀가 그렇게 잘 굴러가지 않습니다.

그리고 이 Frankenstein 생물은 다소 잘못된 제목이 있을 수 있지만 여전히 내가 본 최고의 캐릭터 디자인 중 하나입니다.

HTML 40줄에서만 작동하며 개발자 Victoria Ninni Bergquist는 괴물이 깜박일 수 있도록 CSS를 추가했습니다. 꽤 깔끔한!

3. 토이 스토리 에일리언

Pixar의 Toy Story에는 기억에 남는 캐릭터가 너무 많으며 이 괴상한 외계인이 확실히 그 캐스트의 일부입니다.

박선영은 CSS를 위한 데모와 프론트엔드 코딩의 경계를 테스트하기 위해 이 펜을 만들었습니다. 모든 주요 브라우저와 일부 구형 브라우저에서도 제대로 렌더링되어야 합니다. 비록 회전() 속성에 상당히 의존하지만.

운 좋게도 이것은 IE9+로 거슬러 올라가는 브라우저를 지원하는 CSS 변환 기능의 일부로 제공됩니다. 그래서 이 작은 녹색 외계인은 인터넷으로 연결된 대부분의 세상을 즐겁게 할 수 있습니다.

4. 아쿠아쿠

PlayStation이 있는 경우 Crash Bandicoot에 대해 알고 있을 것입니다. 글쎄, Aku Aku라는 이름의 이 미친 녀석은 마스크… 생물… 물건의 완벽한 복제품입니다.

각 요소에는 해당 기능(예: 눈, 코 입술)을 정의하는 관련 클래스가 있는 자체 div가 있습니다.

나는 전체 디자인에서 가장 힘든 부분이 그의 머리에 있는 깃털 왕관이라고 말하고 싶습니다. 또한 게이머가 오래된 Crash 게임을 선택하도록 권장할 수 있는 멋진 애니메이션도 있습니다.

5. 꼬마 아기

다음은 CSS 캐릭터 디자인과 혼합된 애니메이션의 또 다른 훌륭한 예입니다.

Josh Bader는 순수 CSS와 15줄의 HTML을 사용하여 이 꼬부기 캐릭터를 코딩했습니다. 감동적인!

걷기 효과를 얻기 위해 Josh는 반복되는 애니메이션으로 각 요소에 :after 의사 클래스를 추가했습니다. 내부를 들여다보면 놀라울 정도로 간단한 위업이며 이와 같은 캐릭터를 구축하는 데 그러한 작은 코드가 어떻게 필요한지 훨씬 더 놀랍습니다.

6. 모티 없는 릭

이 펜에서 순수한 CSS로 꼬불꼬불한 Rick을 만든 개발자 James Gilmore의 엉뚱한 작업을 찾을 수 있습니다.

디자인은 실제로 몇 가지 멋진 CSS 그림자를 사용하여 깊이를 만들고 이 캐릭터에 생명력을 부여합니다. 디자인과도 잘 어울리는 반복되는 애니메이션은 말할 것도 없습니다.

이것은 Sass에서도 실행되며 이를 수정하고 싶다면 코드에 사용자 정의 변수가 있습니다. 형식이 매우 잘 지정되어 있으므로 Sass를 배우기 위해 공부하기에 멋진 스니펫이 될 것입니다.

7. 브라이언 그리핀

여기에 Rachel Bull의 또 다른 캐릭터 디자인이 있습니다. 이것은 Family Guy의 Brian Griffin을 특징으로 합니다.

순수한 CSS만으로 얼마나 많은 세부 정보를 얻을 수 있는지 놀랍습니다. Brian의 전체 스타일은 쇼의 아트 스타일과 밀접하게 일치하며 믿을 수 없을 정도로 사실적으로 느껴지는 그림자를 사용합니다.

이것은 150개 이상의 CSS 라인으로 상당히 기술적이고 부팅에 Compass 라이브러리를 사용하고 있습니다.

8. 에밋

Lego Movie에서 Emmet은 그의 모든 영광입니다. Rachel은 현대 HTML을 작성하는 간소화된 방법인 CSS와 Haml을 사용하여 이 스니펫을 처음부터 다시 만들었습니다.

이러한 요소 중 일부는 CSS에서만 실행하는 경우 매우 인상적입니다. 특히 머리카락 소용돌이는 플라스틱 레고 조각처럼 보입니다. 이것이 가능하다는 것이 미쳤습니다!

CSS에는 훌륭한 Sass 로직이 많이 있으며, 만약 당신이 개발자라면 이 펜을 파고드는 것을 즐길 것입니다. 코드와 결과 모두 훌륭합니다.

9. CSS 이브이

Pokemon Go 현상을 중심으로 제작된 이 순수한 CSS Eevee는 David Khourshid가 제작했습니다.

순수한 CSS에서 전체 포켓몬을 다시 만드는 동안 응용 프로그램과 유사한 배경 및 페이지 스타일을 사용합니다. 약간의 텍스처링과 지능적인 레이어링으로 David는 이 Eevee를 실제로 3D처럼 보이게 만들었습니다!

애니메이션도 좋은 터치이며 전체를 보다 사실적으로 느끼게 합니다. 당신이 포켓몬의 팬이든 게임을 만져본 적이 없든, 이것이 좋은 작품이라는 것을 인정해야 합니다.

10. 미키 마우스

이 미키마우스 머리는 조금 더 단순하지만 꽤 위업입니다. 정적이기 때문에 관리가 더 쉬울 것이라고 생각할 수도 있지만 펜은 450개 이상의 Sass 라인 을 밀어냅니다.

가장 기술적인 부분은 모든 모양을 순서대로 가져오고 요소를 재정렬하여 서로의 상단에 적절하게 정렬하는 것입니다.

그러나 결과는 환상적이며 초기 미키 만화와 유사함을 볼 수 있습니다.

11. 젤다 공주

이 젤다 캐릭터 디자인으로 마지막을 위해 최선을 다했습니다. 다리가 약간 짧은 편이지만 전체적인 스타일은 정확합니다.

개발자 Charlie Marcotte는 Sass 및 사용자 정의 CSS 변환을 사용하여 모든 요소를 ​​정렬합니다. 또한 Pug 전처리기 덕분에 원시 HTML이 상당히 단순화되었습니다.

CSS 지식의 한계를 뛰어 넘으려는 경우 유사한 프로젝트를 수행하지 않는 이유는 무엇입니까? 그것은 당신의 기술을 테스트할 수 있는 좋은 방법이며, 당신이 구축한 것은 무엇이든 항상 아래 코멘트에서 공유할 수 있습니다.