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>