우리의 이야기를 들어보세요.

우리가 살아가는 이야기, 우리가 이루고픈 목표, 우리의 내일이 우리에게 어떤 모습으로 다가올지 궁금하시지 않나요?
열정 가득한 우리의 소식을 여러분께 전합니다.

css만을 이용하여 보노보노 그리기

'아카이브/HTML/CSS'에서 '지성씨' 작성함




며칠전 인터넷을 돌아다니다 CSS만을 이용해서 라이언을 그려논것을봤는데요. 어제 도라에몽(?)을 보다가 문득 보노보노를 그려봐야겠다는 생각이 들어서 급하게 만들어봤습니다. 


작업순서는 이렇습니다.


1. 그리고자 하는 이미지 구글링.

2. 이미지를 배경으로 깔아놓는다.

3. 눈, 코, 입등 DIV요소를 만든다.

4. 깔아놓은 배경이미지 위에 CSS를 이용해서 DIV를 디자인을 한다.

5. 재미를 위해서 간단한 애니메이션을 준다.



결과물 드랍



See the Pen BonoBono by jisungyoo (@mainplay) on CodePen.

주로 사용된 CSS설명에 대한 링크 입니다.


1. boder-radius

2, transform

3, transform-origin

4. animation

5. transition


* CSS를 이용해서 다양한 도형을 만들고자 할때 아래의 링크를 참고하시면 많은 도움이 될듯 싶네요.

https://css-tricks.com/examples/ShapesOfCSS/



저작자 표시 비영리 변경 금지
신고


  • 아직 등록된 글이 없습니다. 첫 글을 적어주세요.