background-image: linear-gradient(color, color);

background-image: linear-gradient(degrees, color, color);

background-image: radial-gradient(color, color);

background-image: radial-gradient(circle, color, color);

background-image: radial-gradient(circle, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-side, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-corner, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle farthest-side, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle farthest-corner, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-side at 45px 45px, color 0%, color 20%, color 100%);

* %는 위치값을 나타냄

그레디언트를 지정할 때, background-image 속성을 사용합니다. 단축 속성 background 속성도 가능.

* 방향 : 기본값은 위에서 아래로

*rgba 쓰면 rgba로 일관성 줘야함. #쓰면 안 먹힌다.

시작점은 생략하고 to로 목적지를 설정한다.(시작접을 설정하려면 to 없애면 됨)

to right

to top right (상단 오른쪽으로)

to bottom left (하단 왼쪽으로 )

*여러가지 색상 추가

background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6, #66fb69, #4496e3, #51b0dc);

*각도 지정하기

0deg는 아래에서 위 방향

45deg는 하단 왼쪽에서 상단 오른쪽 방향(즉 45도 방향임)

90deg는 왼쪽에서 오른쪽 방향

180deg는 상단에서 하단 방향 

음수도 가능.

백그라운드

여러개의 이미지를 사용할 경우

먼저 쓴 이미지가 앞으로 나온다.

transition은 한 가지 상태에서 다른 상태로 변화하는 것이라고 보면 됩니다.

▶transition 문법

transition: transition-property | transition-duration | transition-timing-function | transition-delay

* 기본값 : all 0 ease 0 

transition-property 움직일 속성지정 (하나 이상의 속성을 나열할 때 쉼표로 분리)

transition-duration 총 지속 시간 (시간을 정해주지않음 기본값이 0이라 아무효과도 없다, 또한 여러가지 속성을 지정할시 쉼표로 분리해 지정) 

transition-timing-function 속도 설정 (시간지연)

transition-delay 시간 지연

transition-timing-function

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 

* ease : 기본값. 천천히 시작해서, 빠르게 진행하며, 천천히 끝남.

            cubic-bezier(0.25,0.1,0.25,1))와 같음

* linear : 처음과 끝이 같은 속도로 나타남

            cubic-bezier(0,0,1,1))와 같음

* ease-in : 천천히 시작  cubic-bezier(0.42,0,1,1))와 같음

* ease-out : 천천이 끝남  cubic-bezier(0,0,0.58,1))와 같음

* ease-in-out 천천히 시작해서 천천히 끝남  cubic-bezier(0.42,0,0.58,1))와 같음

* cubic-bezier(n,n,n,n)  직접 값을 지정할 수 있음. 가능한 값은 0부터 1까지 숫자값

cubic-bezier값 설정은 아래 참조

http://roblaplaca.com/blog/2011/03/11/understanding-css-cubic-bezier/

http://www.w3.org/TR/css3-transitions/#transition-property-property

http://www.roblaplaca.com/examples/bezierBuilder/#

<http://aboooks.tistory.com/search/gradient> 보고 대략적으로 정리 ㄱㄱ

background 단일 속성으로 사용하기

 {width: 200px; height: 200px;} 레이아웃 크기지정
        background-color: #fff; 색상지정
        background-image:url(파일경로); 이미지파일 경로지정
        background-repeat: no-repeat; 반복지정
        background-attachment: fixed; 스크롤지정
        background-position: 10px 10px;  위치지정
        background-size:100px 50px; 픽셀값으로 크기지정

{ width:270px; height:270px; background:yellow url('파일경로') no-repeat fixed 10px 10px/100px 50px;} 단일속성으로 지정

가상요소

content: ''; w h 넣고 poa left right 넣어주기