목차
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개 이상의 색이 부드럽게 변해가는 걸 의미.
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 가능.
[예제]
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 a, b, c
※ 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%);
}
결과보기
