CSS 입문 | CSS3 모듈 | CSS3 원형 그래디언트
CSS3 원형 그래디언트
CSS3에서는 그래디언트 효과를 선형뿐만 아니라 원형으로도 나타낼 수 있다.
CSS3 그래디언트(gradient) 지원 버전
CSS3 그래디언트(gradient)를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.
| 속성 | ie | chrome | firefox | safari | opera |
|---|---|---|---|---|---|
| linear-gradient / repeating-linear-gradient | 10.0 | 26.0 / 10.0 -webkit- | 16.0 / 3.6 -moz- | 6.1 / 5.1 -webkit- | 12.1 / 11.1 -o- |
| radial-gradient / repeating-radial-gradient | 10.0 | 26.0 / 10.0 -webkit- | 16.0 / 3.6 -moz- | 6.1 / 5.1 -webkit- | 12.1 / 11.6 -o- |
원형 그래디언트(radial gradient)
원형 그래디언트(radial gradient)는 적용된 HTML 요소에 원형으로 그래디언트(gradient) 효과를 적용시켜 준다. 원형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요하다.
원형 그래디언트(radial gradient)의 문법은 다음과 같다.
문법
background: radial-gradient(모양 크기 at 중심점, 색상지정점1, 색상지정점2, ...);
원형 그래디언트는 기본적으로 모양은 ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정된다.
<style>
#grad {
background: red;
background: -webkit-radial-gradient(red, orange, yellow, green, blue, indigo, purple);
background: -moz-radial-gradient(red, orange, yellow, green, blue, indigo, purple);
background: -o-radial-gradient(red, orange, yellow, green, blue, indigo, purple);
background: radial-gradient(red, orange, yellow, green, blue, indigo, purple);
}
</style>
위의 예제에서 가장 먼저 나오는 background 속성은 redial-gradient 속성을 지원하지 않는 모든 브라우저를 위한 것이다.
맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드이다.
이러한 CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.
색상 지정점 사이의 간격 조절
CSS를 이용하면 원형 그래디언트에서 색상 지정점 사이의 간격을 조절할 수 있다.
다음 예제는 색상 지정점 사이의 간격을 다르게 설정한 원형 그래디언트 예제이다.
<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>
원형 그래디언트의 모양 설정
CSS를 이용하면 원형 그래디언트의 모양을 타원이 아닌 원으로도 설정할 수 있다.
다음 예제는 원 모양을 가지는 원형 그래디언트 예제이다.
<style>
#grad {
background: red;
background: -webkit-radial-gradient(circle, red, yellow, orange);
background: -moz-radial-gradient(circle, red, yellow, orange);
background: -o-radial-gradient(circle, red, yellow, orange);
background: radial-gradient(circle, red, yellow, orange);
}
</style>
원형 그래디언트의 크기 설정
CSS를 이용하면 원형 그래디언트의 크기를 설정할 수 있다.
이때 크기를 나타내기 위해 사용할 수 있는 매개변수는 다음과 같다.
- closest-side : 원형 그래디언트의 크기가 가장 가까운 면에 닿을 만큼의 크기로 설정된다.
- farthest-side : 원형 그래디언트의 크기가 가장 먼 면에 닿을 만큼의 크기로 설정된다. 따라서 가까운 면에서는 그래디언트의 일부분이 화면을 넘을 것이다.
- closest-corner : 원형 그래디언트의 크기가 가장 가까운 모서리에 닿을 만큼의 크기로 설정된다.
- farthest-corner : 원형 그래디언트의 크기가 가장 먼 모서리에 닿을 만큼의 크기로 설정된다. 이 크기가 기본 설정이며, 가까운 모서리에서는 그래디언트의 일부분이 화면을 넘을 것이다.
다음 예제는 다양하게 크기를 조절한 원형 그래디언트 예제이다.
<style>
#grad_01 { background: radial-gradient(closest-side at 35% 35%, red, yellow, orange); }
#grad_02 { background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange); }
#grad_03 { background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange); }
#grad_04 { background: radial-gradient(farthest-corner at 35% 35%, red, yellow, orange); }
</style>
repeating-radial-gradient() 메소드
repeating-radial-gradient() 메소드는 원형 그래디언트 효과가 계속 반복되도록 설정한다.
다음 예제는 반복되는 원형 그래디언트 예제이다.
<style>
#grad {
background: red;
background: -webkit-repeating-radial-gradient(red, white 10%, blue 20%);
background: -moz-repeating-radial-gradient(red, white 10%, blue 20%);
background: -o-repeating-radial-gradient(red, white 10%, blue 20%);
background: repeating-radial-gradient(red, white 10%, blue 20%);
}
</style>