..

Search

44) CSS3 원형 그래디언트

CSS3 원형 그래디언트


 

CSS3 그래디언트(Gradient)

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_01background: radial-gradient(closest-side at 35% 35%, red, yellow, orange); }

    #grad_02background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange); }

    #grad_03background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange); }

    #grad_04background: 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>

코딩연습 ▶


연습문제