____  ___    _  _     _   _ _____     _______
 / ___|/ _ \  | || |   | | | |_ _\ \   / / ____|
| |  _| | | | | || |_  | |_| || | \ \ / /|  _|
| |_| | |_| | |__   _| |  _  || |  \ V / | |___
 \____|\___/     |_|   |_| |_|___|  \_/  |_____|

 --- A GOPHER-LIKE INTERFACE FOR HIVE BLOCKCHAIN ---

[CSS Drawing] 키보드로 그린 그림

BY: @magical-salt | CREATED: May 23, 2019, 1:42 p.m. | VOTES: 29 | PAYOUT: $1.21 | [ VOTE ]

[IMAGE: https://cdn.steemitimages.com/DQmWgXYuYYNvyMTTWDnfeU487CgHxN3rTi7PTKQB9dK4ud2/image.png]

CSS는 웹페이지에서 글꼴, 레이아웃, 각 요소의 색상, 간격 등의 스타일을 다루는 방법을 정의한 언어라고 볼 수 있습니다.
애초에 그림 그리기용을 목적으로 나온 언어가 아님에도, 이 CSS로 그림을 그리는 취미를 가지신 분들이 많더군요.

이 비효율적으로만 보이는 취미를 저도 가져보게 되었습니다.
작업이 꽤나 즐거워서 한동안 이런 작업물 위주로 보여드리게 될 것 같네요 :D

다음은 '엑스레이 토끼' 라고 이름 붙인 제 첫 작품인데요.

[IMAGE: https://cdn.steemitimages.com/DQmUbpMAAhb8UygrThg1c6cctet5F8UyBPPXp3WQyN9tVZD/xray3.gif]

좌측과 같이 열심히 타이핑을 하면, 오른쪽의 토끼가 그려지게 됩니다.

[IMAGE: https://cdn.steemitimages.com/DQmQNNmnadwWgy5Zqr2XEG6bffa3G4Eckx4aR4YbwrrGs3y/xray1.gif]

커다란 두 귀와, 수염에는 애니메이션 효과도 넣어봤어요.
왠지 고양이의 얼굴을 가진 토끼이군요.

[IMAGE: https://cdn.steemitimages.com/DQmXUWbphyQDTfWG7u6DsfTLTPTgnRaHhNgF18PrF8LJ2da/xray2.gif]

토끼 위에 마우스 커서를 올려놓으면, 해골이 보이는 효과도 넣어보았습니다.
나름 건치를 가진 녀석이었어요 :)

다음 경로에서, 그림과 소스코드를 직접 확인해 보실 수 있습니다.
(구형 브라우저에서는 제대로 보이지 않을 수 있습니다.)
https://codepen.io/magical-salt/pen/zQzMrv

TAGS: [ #kr ] [ #kr-art ] [ #kr-dev ] [ #art ] [ #dev ]

Replies

@epitt925 | May 23, 2019, 1:59 p.m. | Votes: 0 | [ VOTE ]

건치가 부럽습니다 ㅋㅋㅋㅋ

@magical-salt | May 23, 2019, 3:03 p.m. | Votes: 0 | [ VOTE ]

그리는 동안 몹시 귀찮고 번거롭고 그랬는데, 꾹참고 그린 보람이 있네요. 파치아모님의 부러움도 살 수 있구요 :D

@doidoi-sound | May 23, 2019, 7:16 p.m. | Votes: 0 | [ VOTE ]

processing 이나 openFrameworks 같네요 ㅎㅎㅎㅎ

@magical-salt | May 24, 2019, 4:17 p.m. | Votes: 0 | [ VOTE ]

프로세싱은 예전에 사아알짝 간만 봤었던 기억이 나네요 :)
말씀하신 언어들 사용하면, 좀 더 세련된 작업물을 수월하게 만들 수 있을 것 같아요.
나아아아중에 한번 도전해 봐야겠습니다!

@chapchop | May 23, 2019, 11:28 p.m. | Votes: 0 | [ VOTE ]

와.. 신기해요. ㅇ.ㅇ animation 태그 같은 걸 쓰는 건가요? html 에 그런 태그도 있어요? 신기 신기.. ㅇ.ㅇ

@magical-salt | May 24, 2019, 4:17 p.m. | Votes: 0 | [ VOTE ]

html 태그는 div만 사용했고, css의 @keyframes 로 애니메이션 효과를 넣어봤어요 :)
관심 가져주셔서 감사합니다!! :0

@eversloth | May 24, 2019, 5:05 a.m. | Votes: 0 | [ VOTE ]

CSS 너무 어려워요 ㅋㅋㅋ 디자인 감각이 없어서 더 그런걸지도 모르겠지만요.

@magical-salt | May 24, 2019, 4:18 p.m. | Votes: 0 | [ VOTE ]

이 짤방이 생각나는 군요 :)

[IMAGE: https://cdn.steemitimages.com/DQmWPqeEVFdCsfszyhpmyKRDkchwPsdQHpeFEb7fwopuXuy/giphy.gif]

@gghite | May 25, 2019, 12:33 a.m. | Votes: 0 | [ VOTE ]

재미있는 도구인데요?ㅋㅋ

@magical-salt | May 26, 2019, 2:48 p.m. | Votes: 0 | [ VOTE ]

네. 요즘 재미붙였어요. 완전 비효율적이긴 한데... 그래도 그리는 재미가 있더군요 :D

@pooka | May 25, 2019, 6:32 a.m. | Votes: 0 | [ VOTE ]

신기방기하네요 ㅎㅎ
언어가 그림이 된다...^^b

@magical-salt | May 26, 2019, 2:55 p.m. | Votes: 0 | [ VOTE ]

키보드가 큰일 했습니다 :^D

[ BACK TO TRENDING ] [ BACK TO MENU ]
CMD>