CSS3만으로 그린 뽀로로~
웹표준/CSS 2011/08/12 13:13 |
컴퓨터 정리를 하다가 올 봄에 본부 이벤트로 제출했었던 CSS3 로 그린 뽀로로를 발견했다.
CSS3의 다양한 기능을 활용해보자 라는 의도에 맞춰 충실히 그려보았지만 역시 쉽진 않았다 ( ㅠㅠ 다분히 노가다..)
약간 살찐 뽀로로가 되버렸다,
Sencha Animator는 CSS로 애니메이션을 제작할때 도움으로 주는 타임라인 기반의 위지윅툴이지만
위 작업과 같이 CSS를 과도하게 쓸 경우나 위치값을 조정할때 좋을거 같다.
사용자 정의 css도 객체에 적용할 수 있고 html 파일로 export도 가능하다.
나의 경우 몇가지는 직접 css 코드를 작성하고 Sencha에서는 위치를 지정하거나 shadow를 줄 때 적극 활용하였다.
우선 원본 이미지를 레이어처럼 올려놓고
그 위에 엘리먼트를 배치하였다.
대부분이 원을 겹쳐서 이미지를 표현한것인데 아래와 같이 안경테 중간 부분은 문자인 ▶◀를 붙혀서 만든것이다.
그리고 오른쪽 눈동자도 . 을 확대하여 표현하였다.
CSS3의 다양한 기능을 활용해보자 라는 의도에 맞춰 충실히 그려보았지만 역시 쉽진 않았다 ( ㅠㅠ 다분히 노가다..)
약간 살찐 뽀로로가 되버렸다,
◀ 작업본
Sencha Animator는 CSS로 애니메이션을 제작할때 도움으로 주는 타임라인 기반의 위지윅툴이지만
위 작업과 같이 CSS를 과도하게 쓸 경우나 위치값을 조정할때 좋을거 같다.
사용자 정의 css도 객체에 적용할 수 있고 html 파일로 export도 가능하다.
나의 경우 몇가지는 직접 css 코드를 작성하고 Sencha에서는 위치를 지정하거나 shadow를 줄 때 적극 활용하였다.
우선 원본 이미지를 레이어처럼 올려놓고
그 위에 엘리먼트를 배치하였다.
그리고 오른쪽 눈동자도 . 을 확대하여 표현하였다.
"pure css drawing" 로 검색하면 많은 자료들이 나오며
"WDS-CSS drawings, 50 great examples"에 정말 잘 그려진 (짜여진?) 작품들이 많다. 좋은 참고 자료가 될듯하다.
작업 파일 : 크롬에서만 잘 되었는데 지금 설치되어있는 크롬 13.0 에서는 번져보인다..이런..

pororo.html
댓글을 달아 주세요
체육대회 끝나고 작품 시연을 못해서 어떻게 그리셨는지 궁금했는데.. 역시 1등다운 작품이네요 ~~
근데 크롬 최신버전으로 보니까 번져보이는게 아니라 뽀로로가 한대 맞은 것 같아요 ^^;