Css3

text-shadow

텍스트에 그림자 효과를 부여하는 프로퍼티.

text-shadow: 1px 1px 2px #000;
text-shaodw: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

첫번째 값 > 그림자를 텍스트의 오른쪽으로 지정한 값만큼 이동.
두번째 값 > 그림자를 텍스트의 아래로 지정한 값만큼 이동.
세번째 값 > 그림자의 흐림(blur) 지정값 만큼 그림자가 커지고 흐려짐.
네번째 값 > 그림자의 색상 값.
속성을 중복으로 넣을 수도 있다.

box-shadow

요소 그림자 효과를 부여하는 프로퍼티.
그림자 효과는 안쪽, 바깥쪽에 넣을 수 있다.

box-shadow : 10px 10px red;
box-shadow : inset 10px 10px 10px 5px 5px #000;

첫번째 값 > inset을 사용하면 요소의 안쪽에 그림자 효과를 넣을 수 있다.
두번째 값 > 그림자를 텍스트의 오른쪽으로 지정한 값만큼 이동.
세번째 값 > 그림자를 텍스트의 아래로 지정한 값만큼 이동.
네번째 값 > 그림자의 흐림(blur) 지정한 값만큼 그림자가 커지고 흐려짐.
다섯번째 값 > 그림자를 더 크게 확장(음수, 양수)
여섯번째 값 > 그림자의 색상 값.

Gradient

그레이디언트에는 2가지 이상의 색상을 혼합하여 생성하며, 종류는 선형, 방사형이 있다.
https://www.colorzilla.com/gradient-editor/

transition

CSS 속성을 변경할 때 애니메이션 속도를 조절할때 사용.

div {width:100px;height:100px;background:#000;transition:all 2s;}
div:hover {border-radius:50%p;background:red;}

div {width:100px;height:100px;background:#000;}
div:hover {border-radius:50%p;background:red;transition:all 2s;}

위 속성에서 transition을 div에 적용하면 마우스가 on, off 될때 자연스럽게 동작하며,
hover에 넣게 될 경우 마우스 on 일때만 반영된다.

Animation

animation을 사용하는것 보다 jquery를 사용하는게 아직도 익숙하지만,
css로 해결하지 못하는 것들을 jquery로 해결해야 된다는 생각을 가지고 있고,
프로젝트에서 ie를 어디까지 맞추는지에 따라 animation을 사용할 수 있는 것 같다.

div {
	width:150px;
	height:150px;
	background:blue;
	position:relative;
	animation:move 5s infinite;
	animation-direction: alternate;	
}
 @keyframes move {
      0%   { background: red;    left: 0px;   top: 0px; }
      25%  { background: yellow; left: 200px; top: 0px; }
      50%  { background: blue;   left: 200px; top: 200px; }
      75%  { background: green;  left: 0px;   top: 200px; }
      100% { background: red;    left: 0px;   top: 0px; }
    }

위 코드를 보면 animation에 들어가는 move는 keyframes의 name이며, 그 뒤는 시간, 마지막은 횟수이며 infinite는 무한으로 실행된다.
animation-direction는 애니메이션이 종료될 때 진행하는 방향에 대한 옵션이며, alternate는 홀수번째는 normal, 짝수는 reverse로 진행된다. 총4가지 옵션이 있다.
간단한 코드이며, animation을 실제 프로젝트에서 사용하려면 많은 옵션들에 대해서 공부해야 할 듯....