박스 그림자(box-shadow) & 텍스트 그림자(text-shadow)

• 그림자를 주는 효과입니다.

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

Property	Description
h-shadow	그림자의 수평 거리를 나타냅니다.
v-shadow	그림자의 수직 거리를 나타냅니다.
blur	그림자의 흐림정도를 나타냅니다.
spread	그림자의 거리를 나타냅니다.
color	그림자의 색을 나타냅니다.
inset	그림자의 내부 그림자를 나타냅니다.

Sample1

Sample2

Sample3

Sample4

Sample5

Example

Radius

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

Syntax

border-radius : length l % l intial l inherit

Sample1

Sample2

Sample3

Sample4

Sample5

Sample6

transform

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

회전하기(rotate)

Property	Sample	Description
rotatae	transform:rotate(10deg);	10도 회전을 나타냅니다.
rotataeX	transform:rotateX(10deg);	X좌표 회전을 나타냅니다.
rotataeY	transform:rotateY(10deg);	Y좌표 회전을 나타냅니다.
rotataeZ	transform:rotateZ(10deg);	Z좌표 회전을 나타냅니다.

Sample1

Sample2

Sample3

Sample4

Sample5

이동하기(translate)

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

Sample1

확대/축소하기(scale)

Property	Sample	Description
scale	transform:scale(2,2,2);	X좌표,Y좌표,Z좌표 확대를 나타냅니다.
scaleX	transform:scaleX(2);	X좌표 확대를 나타냅니다.
scaleY	transform:scaleY(2);	Y좌표 확대를 나타냅니다.
scaleZ	transform:scaleZ(2);	Z좌표 확대를 나타냅니다.

Sample1

Sample2

기울기(skew)

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

Sample1

Sample2

Sample3

Transform-orign

Sample1

Sample2

Sample3

Sample4

Sample5

Sample6

Background Gradients

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

Syntax

background:liner-gradient(direction, color1, color2, .....);

Sample1

Sample2

Sample3

Sample4

Sample5

Sample6

Sample7

Sample8

Sample9

Sample10

Sample11

Sample12

Sample12

Transition

Syntax

transition : {property}{duration}{timing-function}{delay} | inital | inherit;

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

Transition-timing-function 속성

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

sample1

Animation

Syntax

animation : {name}{duration}{timing-function}{delay}{iteration-count} {direction}{fill-mode}{play-state};

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

@keyframes

Sample1

Sample2

Sample3

Sample4

sample5

sample6

sample7

Loading Animation

lee jeong min