박스 그림자(box-shadow)

• box-shadow : 박스에 그림자를 주는 효과

Syntax

box-shadow : h-shadow │ v-shadow │blur│spread│color│none│inset│initial│inherit ;

Property	Description
h-shadow	그림자의 수평(x축) 거리를 나타냅니다
y-shadow	그림자의 수직(y축) 거리를 나타냅니다
blur	그림자의 흐린정도를 나타냅니다
spread	그림자의 거리를 나타냅니다
color	그림자의 색을 나타냅니다
inset	그림자를 내부에 나타냅니다

Sample1

Sample2

Sample3

Sample4

Sample5

Sample6

radius

• radius는 모서리를 둥글게 만들어줍니다.

border-radius : length/ % / intial / inherit

sample

sample2

sample3

sample6

sample7

transform

• transform은 이동(translate),확대/축소(scale),기울기(skew),회전(rotate),변형 행렬(matrix)등 5가지 구조로 이루어져 있다.

회전하기(rotate)

지정한 각도만큼 요소를 회전시킵니다.

Property	Sample	Description
rotate	transform:rotate(10deg);	10도 회전을 나타냅니다.
rotate3D	transform:rotate(0,1,0,10deg);	3D회전을 나타냅니다.
rotateX	transform:rotateX(10deg);	X좌표 회전을 나타냅니다
rotateY	transform:rotateY(10deg);	Y좌표 회전을 나타냅니다
rotateZ	transform:rotateZ(10deg);	Z좌표 회전을 나타냅니다

sample1

sample2 : rotateX

sample3 : rotateY

sample3 : rotateZ

sample3 : rotate3d(X축,Y축,Z축,각도)

이동하기(translate)

이동 할 영역을 지정하면, 지정한 크기만큼 이동합니다.

Property	Sample	Description
translate	transform:translate(10px,20px);	X좌표,Y좌표 이동을 나타냅니다.
translate3D	transform:trnaslate3d(10px,20px,30px);	X좌표,Y좌표,Z좌표 이동을 나타냅니다.
translateX	transform:translateX(10px);	X좌표 이동을 나타냅니다
translateY	transform:translateY(10px);	Y좌표 이동을 나타냅니다
translateZ	transform:translateZ(10px);	Z좌표 이동을 나타냅니다

translate

확대/축소하기(scale)

확대축소시킵니다.

Property	Sample	Description
scale	transform:scale(2,2);	X좌표,Y좌표 이동을 나타냅니다.
scale3D	transform:scale3d(2,2,2);	X좌표,Y좌표,Z좌표 이동을 나타냅니다.
scaleX	transform:scaleX(2);	X좌표 이동을 나타냅니다
scaleY	transform:scaleY(2);	Y좌표 이동을 나타냅니다
scaleZ	transform:scaleZ(2);	Z좌표 이동을 나타냅니다

scale

scale

비틀기(skew)

Property	Sample	Description
skew	transform:skew(10deg,20deg);	X좌표,Y좌표 기울기를 나타냅니다.
skewX	transform:skewX(10deg,20deg);	X좌표 기울기를 나타냅니다
skewY	transform:skewY(10deg,20deg);	Y좌표 기울기를 나타냅니다

skewX

skewY

skew

transform-orign(기준점)

orign

orign

orign

orign

orign

orign

gradient

Property	Sample	Description
linear-gradient	background:linear-gradient;	선형 그라데이션 백그라운드를 설정합니다.
radial-gradient	background:linear-gradient;	원형 그라데이션 백그라운드를 설정합니다.

Sample1(방향,색1,색2) : -webkit- 필요

Sample2(to 방향,색1,색2)

Sample3(방향,색1,색2)

Sample4(방향,색1,색2)

Sample5(방향,색1,색2)

Sample6(방향,색1,색2)

Sample7(방향,색1,색2)

Sample8(방향,색1,색2)

Sample9(방향,색1,색2)

radial (방향,색1,색2)

radial2 (방향,색1,색2)

radial2 (방향,색1,색2)

radial2 (방향,색1,색2)

transition

{property}{duration}{timing-function}{deley}│

Property	Sample	Description
transition-property	transition-property:width;	css속성을 지정합니다.
transition-duration	transition-duration:1s;	변화할 시간을 지정합니다.
transition-timing-function	transition-timing-function:linear;	움직임 효과를 지정합니다.
transition-delay	transition-delay:1s;	변화가 시작되기 전 시간을 지정합니다.

Transition-timing-delay

Property	Description
linear	일정 간격으로 변화
ease	처음에는 서서히 가속하고 종점 가까이에서 급격히 감속
ease-in	제로 속도에서 시작, 서서히 가속.
ease-out	최대 속도에서 시작,서서히 감속.
ease-in-out	제로 속도에서 시작,중간 지점에서 최고 속도,서서히 감속.
cubic-bezier	직접 값을 입력해서 속도를 지정.

Sample

animation

Syntax

transition;{name}{duration}{timing-function}{delay} {interation-count}{ditrction}{fill-mode}{play-state};

Property	Sample	Description
animation-name	animation-name:mymove	@keyframes에 저장된 이름을 설정합니다.
animation-duration	animation-duration:4s	애니메이션이 실행되는 총 시간을 지정합니다.
animation-timing-function	animation-timing-function:linear	키 프레임 변화 정도를 지정합니다.
animation-delay	animation-delay:4s	애니메이션이 시작되기 전 대기시간을 지정합니다.
animation-interation-count	animation-interation-count:4;	애니메이션의 반복횟수를 지정합니다.
animation-derection	animation-derection:alternate;	키프레임의 연결 방향을 지정합니다.
animation-fill-mode	animation-fill-mode:forwards;	애니메이션이 시작되기 전이나 끝나고 난 후 어떤값이 적용될지 지정합니다.
animation-play-state	animation-play-state:paused;	애니메이션의 실행상태를 지정합니다.

@keyframes

sample1

sample2

sample3

sample4

sample5

sample6

sample7

sample8

sample3

loading Animation

바 양끝에 원을 붙인 후 바를 돌린다(바=가상으로 공간만잡아줌)

mediumaquamarine / palevioletred / khaki

Webstoryboy