CSS DrawingBasic Tutorial

@zineeworld

@zineeworld

selecter { property: value; }

@zineeworld

test

@zineeworld

resultcode

CSS Basic for drawing

1. box-sizing2. position3. margin4. border5. border-radius6. background-color7. z-index8. overflow9. transform

10. transition

@zineeworld

@zineeworld

https://opentutorials.org/module/2367/13339

Recommended Course

codepen photoshop color picker

Tool

or

chrome extension

@zineeworld

@zineeworld

Tool - Codepen

Free Signup

@zineeworld

Tool - Codepen

I don’t have photoshop :’(

@zineeworld

Tool - Online Photoshop

@zineeworld

선택 도구

색상 추출 도구

크기 확인

Tool - Color picker

colorpicker 검색 후 설치

@zineeworld

Tool - Color picker

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

@zineeworld

So, What we are going to draw?

@zineeworld

@zineeworld

Ryan

http://codepen.io/collection/DzKOkZ/

How to?

@zineeworld

figure out draw +

Figure out

@zineeworld

#d59729

#000000

#FFFFFF

#313654

colorsizepositionshape

@zineeworld

ear left

eye right

nose

mouth left mouth right

face

eyebrow left eyebrow right

ear right

eye left

Layoutryan

HTML

@zineeworld

ryan

@zineeworld

Draw - Face

@zineeworld

widthheightborderborder-radiusbackground

Draw - Ear

@zineeworld

widthheightborderbackground

Draw - Ear

@zineeworld

z-index

Draw - Eyebrow

@zineeworld

widthheightborderborder-radiusbackground

Draw - Eye

@zineeworld

widthheightborderborder-radiusbackground

Draw - Nose

@zineeworld

widthheightborderborder-radiusbackground

Draw - Mouth

@zineeworld

widthheightborderborder-radiusbackground

Draw - Mouth

@zineeworld

z-index

Draw - Mouth

@zineeworld

widthheightborderborder-radiusbackgroundtransform

Draw Done !

@zineeworld

@zineeworld

+@:hovertransformtransition

codepen / facebook / twitter

@zineeworld

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