목차
- Gradient 관련 주소
- Gradient 정의
- Gradient 종류 - 색 번짐 방향 기준
- 선형 그라디언트 (Linear Gradients) 구문
- 상하 Gradient (기본값)
- 좌우 Gradient
- 대각선 Gradient
- 각도 Gradient (= 앵글 Gradient) 구문
- 상하 여러 색 Gradient (= 수직 멀티 그라디언트)
- 좌우 여러 색 Gradient (= 수평 멀티 그라디언트)
- 좌우 단색 투명도 Gradient
- 반복 선형 Gradient 구문
Gradient 관련 주소
https://uigradients.com
https://codepen.io/sinbi/pen/JqjyNP
Gradient 정의
※ 「그레이디언트」가 표준 용어. 「그라디언트」라고도 함.
2개 이상의 색이 부드럽게 변해가는 걸 의미.
2. 장점: 이미지 이용할 때보다 자원을 덜 차지해 랜딩 속도도 빠르고, 확대했을 때 더 이쁘게 보임.
3. 지원브라우저: IE10 이상 주요 최신 브라우저
Gradient 종류 - 색 번짐 방향 기준
선형 그라디언트 (Linear Gradients) - 상하 / 좌우 / 대각선
원형 그라디언트 (Radial Gradients) - 원형
선형 그라디언트 (Linear Gradients) 구문
selector {background: linear-gradient(direction, start, middle, end);}
[속성값]
direction
변화 방향 : (선택) 상하 방향 , 좌우 방향 , 대각성 방향 등
to bottom
밑으로 (= 위에서 아래로) - 기본값
to top
위로 (= 아래에서 위로)
to right
오른쪽으로 (= 왼쪽에서 오른쪽으로)
to left 왼쪽으로 (= 오른쪽에서 왼쪽으로)
to bottom right 대각선으로 (= 좌상단에서 우하단으로)
start
필수. 시작 색깔 (= 출발지 색깔)
middle
선택. 중간 색깔 (= 중간지 색깔)
쉼표 (,) 이용해 여러 개 나열 가능.
end
필수. 종료 색깔 (= 목적지 색깔)
상하 Gradient (기본값)
body {
background: red; /* 그라디언트 지원 않는 브라우저용 */
background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* 표준 */
}
결과보기
좌우 Gradient
body {
background: red; /* 그라디언트 지원 않는 브라우저용 */
background: -webkit-linear-gradient(left, red , yellow); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* 표준 */
}
결과보기
대각선 Gradient
#hz {
background: red; /* 그라디언트 지원 않는 브라우저용 */
background: -webkit-linear-gradient(left top, red, yellow); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, yellow); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, yellow); /* Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, yellow); /* 표준 */
}
결과보기
각도 Gradient (= 앵글 Gradient) 구문
selector {background: linear-gradient(deg, start, middle, end);}
[속성값]
deg
각도. 0deg ~ 360deg 가능.
※ 0 deg는 선형 그라디언트 기본 방향인 to bottom과 색상 위치가 반대.
[예제]
body {
background: red; /* 그라디언트 지원 않는 브라우저용 */
background: -webkit-linear-gradient(-90deg, red, yellow); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* 표준 */
}
결과보기
상하 여러 색 Gradient (= 수직 멀티 그라디언트)
body {
background: red; /* 그라디언트 지원 않는 브라우저용 */
background: -webkit-linear-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* 표준 */
}
결과보기
좌우 여러 색 Gradient (= 수평 멀티 그라디언트)
body {
background: red; /* 그라디언트 지원 않는 브라우저용 */
/* Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 to 12.0 */
background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);
/* Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 표준 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
결과보기
좌우 단색 투명도 Gradient
color 값에 rgba() 색상 함수 이용.
(예) rgba(a,b,c,d) (예) rgba (0,0,0,0.5)
a, b, c
a,b,c 각각 0 ~ 255 숫자 가능.
※ a, b, c가 결합해 하나의 색상 구성.
d
불투명도. 0~1 까지 가능.
※ 0 (완전 투명) ~ 1 (완전 불투명)
[예제]
body {
background: red; /* 그라디언트 지원 않는 브라우저용 */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 표준 */
}
결과보기
반복 선형 Gradient 구문
repeating-linear-gradient(direction, start, middle, end)
[예제]
body {
background: red; /* 그라디언트 지원 않는 브라우저용 */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 표준 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
결과보기
