CSS / radial-gradient - 원형 그라데이션 효과 만들기
radial-gradient
radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다.
문법
radial-gradient( shape size at position, color1, color2, ..., color3 )
- shape : 원 모양인지 타원 모양인지 정합니다.
- size : 크기를 정합니다.
- position : 중심의 위치를 정합니다.
- color : 색을 정합니다.
아래의 예제로 하나씩 알아보겠습니다.
예제 1
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: 0px auto; width: 400px; height: 400px; background: radial-gradient( yellow, red, brown ); } </style> </head> <body> <div class="jb"></div> </body> </html>
노란색, 빨간색, 갈색으로 변하는 원형 그라데이션입니다.
예제 2
div.jb { margin: 0px auto; width: 400px; height: 400px; background: radial-gradient( yellow 10%, red 100px, brown 50% ); }
색 뒤에 길이를 넣어서 색이 차지하는 범위를 정할 수 있습니다.
예제 3
div.jb { margin: 0px auto; width: 100%; height: 400px; background: radial-gradient( ellipse, yellow, red, brown ); }
정사각형이 아닌 직사각형일 때 원 모양으로 채울지 타원 모양으로 채울지 정할 수 있습니다. 원일 때는 circle, 타원일 때는 ellipse를 입력합니다. ellipse가 기본값이므로, 값이 없으면 타원 모양이 적용됩니다.
예제 4
div.jb { margin: 0px auto; width: 100%; height: 400px; background: radial-gradient( circle, yellow, red, brown ); }
직사각형에서도 원 모양으로 그라데이션을 만듭니다.
예제 5
div.jb { margin: 0px auto; width: 100%; height: 400px; background: radial-gradient( at 30% 20%, yellow, red, brown ); }
중심의 위치를 바꿉니다.
예제 6
크기를 정합니다. 가능한 값은 farthest-corner, farthest-side, closest-corner, closest-side이고, 기본값은 farthest-corner입니다.
div.jb { margin: 0px auto; width: 100%; height: 400px; background: radial-gradient( farthest-corner at 30% 20%, yellow, red, brown ); }
div.jb { margin: 0px auto; width: 100%; height: 400px; background: radial-gradient( farthest-side at 30% 20%, yellow, red, brown ); }
div.jb { margin: 0px auto; width: 100%; height: 400px; background: radial-gradient( closest-corner at 30% 20%, yellow, red, brown ); }
div.jb { margin: 0px auto; width: 100%; height: 400px; background: radial-gradient( closest-side at 30% 20%, yellow, red, brown ); }