This document provides a tutorial on using CSS to draw basic shapes like a face. It discusses key CSS properties for drawing like box-sizing, position, background-color, and transform. It then walks through the steps to draw different facial features like eyes, nose, mouth by specifying properties like width, height, border, and position. Color values are also provided for common parts of the face. The tutorial concludes by providing links to blog posts that cover preparing for the tutorial, adding the HTML, and implementing the CSS code.

1. CSS Drawing
Basic Tutorial
@zineeworld

2. @zineeworld

3. selecter { property: value; }
@zineeworld

4. test
@zineeworld
resultcode

5. CSS Basic for drawing
1. box-sizing
2. position
3. margin
4. border
5. border-radius
6. background-color
7. z-index
8. overflow
9. transform
10. transition
@zineeworld

6. @zineeworld
https://opentutorials.org/module/2367/13339
Recommended Course

7. codepen photoshop color picker
Tool
or
chrome extension
@zineeworld

8. @zineeworld
Tool - Codepen
Free Signup

9. @zineeworld
Tool - Codepen

10. I don’t have photoshop :’(
@zineeworld

11. Tool - Online Photoshop
@zineeworld
선택 도구
색상 추출
도구
크기 확인

12. Tool - Color picker
colorpicker 검색 후 설치
@zineeworld

13. Tool - Color picker
추출하고 싶은 색상 위에
마우스 포인터를 갖다 대면
색상값(hex)이 나옵니다.
@zineeworld

14. So, What we are going to draw?
@zineeworld

15. @zineeworld
Ryan
http://codepen.io/collection/DzKOkZ/

16. How to?
@zineeworld
figure out draw +

17. Figure out
@zineeworld
#d59729
#000000
#FFFFFF
#313654
color
size
position
shape

18. @zineeworld
ear left
eye right
nose
mouth left mouth right
face
eyebrow left eyebrow right
ear right
eye left
Layout
ryan

19. HTML
@zineeworld
ryan
@zineeworld

20. Draw - Face
@zineeworld
width
height
border
border-radius
background

21. Draw - Ear
@zineeworld
width
height
border
background

22. Draw - Ear
@zineeworld
z-index

23. Draw - Eyebrow
@zineeworld
width
height
border
border-radius
background

24. Draw - Eye
@zineeworld
width
height
border
border-radius
background

25. Draw - Nose
@zineeworld
width
height
border
border-radius
background

26. Draw - Mouth
@zineeworld
width
height
border
border-radius
background

27. Draw - Mouth
@zineeworld
z-index

28. Draw - Mouth
@zineeworld
width
height
border
border-radius
background
transform

29. Draw Done !
@zineeworld

30. @zineeworld
+@
:hover
transform
transition

31. codepen / facebook / twitter
@zineeworld

32. Blog Tutorial
(1) 준비 - http://zinee-world.tistory.com/424
(2) HTML - http://zinee-world.tistory.com/425
(3) CSS - http://zinee-world.tistory.com/426