그래디언트
선형 그래디언트(linear gradients)
적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용
최소한 두 개 이상의 색상 지정점이 필요
색상 지정점에는 그래디언트 효과로 그 사이의 색상 표현을 부드럽게 전환해주고 싶은 색상을 명시
가장 먼저 정의된 색상 지정점이 시작점이 되며, 그 후로는 마지막 지정점까지 차례대로 그래디언트 효과가 적용
background: linear-gradient(진행방향, 색상지정점1, 색상지정점2, ...);
진행방향
top, right, bottom, left 뿐만 아니라 대각선으로도 설정 가능
기본 진행 방향 : 위쪽에서 아래쪽으로 진행
각도로 명시하여 설정할 경우 기준 각도인 0도는 아래쪽에서 위쪽으로의 진행을 의미
각도가 양수일 때는 기준 각도를 중심으로 시계방향으로 회전하며, 음수일 때는 반시계방향으로 회전
투명도
RGBA 색상값을 사용
알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값
효과 반복
repeating-linear-gradient() 메소드
원형 그래디언트(radial gradients)
적용된 HTML 요소에 원형으로 그래디언트(gradient) 효과를 적용
원형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요
기본 형태 : ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정
background: radial-gradient(모양 크기 at 중심점, 색상지정점1, 색상지정점2, ...);
색상 지정점 사이의 간격 조절
<style>
#grad {
background: red;
background: -webkit-radial-gradient(red 5%, yellow 20%, orange 50%);
background: -moz-radial-gradient(red 5%, yellow 20%, orange 50%);
background: -o-radial-gradient(red 5%, yellow 20%, orange 50%);
background: radial-gradient(red 5%, yellow 20%, orange 50%);
}
</style>
원형 그래디언트 설정
- closest-side : 원형 그래디언트의 크기가 가장 가까운 면에 닿을 만큼의 크기
- farthest-side : 원형 그래디언트의 크기가 가장 먼 면에 닿을 만큼의 크기, 가까운 면에서는 일부분이 화면을 넘음
- closest-corner : 원형 그래디언트의 크기가 가장 가까운 모서리에 닿을 만큼의 크기
- farthest-corner : 원형 그래디언트의 크기가 가장 먼 모서리에 닿을 만큼의 크기, 기본 설정, 가까운 모서리에서는 그래디언트의 일부분이 화면을 넘음
원형 그래디언트 효과가 반복
repeating-radial-gradient() 메소드
https://www.tcpschool.com/css/css3_module_radialGradients
https://www.tcpschool.com/css/css3_module_linearGradients
