css

CSS - 반지름형 그라디언트

2월 27, 2019
radial-gradient 를 이용하면 반지름형 그라디언트를 만들 수 있습니다. 형식은 다음과 같습니다.

radial-gradient(
 [[ ellipse | circle ] size || extent-keyword] [at position],
 color-stop1, color-stop2, …
);

// 색상으로 그라디언트를 그릴 때
radial-gradient(color-stop1, color-stop2, ...);

// 그라디언트 크기를 지정할 때
radial-gradient(size, color-stop1, color-stop2, ...);

// 모양을 지정할 때
radial-gradient(shape, color-stop1, color-stop2, ...);

// 모양 + 크기를 지정할 때
radial-gradient(shape size, color-stop1, color-stop2, ...);

// 모양 + 포지션을 지정할 때
radial-gradient(shape at position, color-stop1, color-stop2, ...);

// 포지션을 지정할 때
radial-gradient(at position, color-stop1, color-stop2, ...);

속 성 설 명
shape
shape size		 반지름형 그라디언트를 지정. 선택사항
  • shape: ellipse | circle 중 하나
      ellipse(타원) 기본값
  • size: 크기 지정. px 나 퍼센트 지정
      <width><height> | <width> 중 하나
extent-keyword 그라디언트 크기를 지정. 선택사항.
  • closest-side: 중심으로부터 가장 가까운 측면에 닿을 만큼의 크기로 설정
  • closest-corner: 중심으로부터 가장 가까운 모서리에 닿을 만큼의 크기로 설정
  • farthest-side: 중심으로부터 가장 먼 측면에 닿을 만큼의 크기로 설정
  • farthest-corner: 중심으로부터 가장 먼 모서리에 닿을 만큼의 크기로 설정. (기본값)
at position 반지름이 시작하는 위치. 기본값 center
(top | bottom | left | right | center | 퍼센트 | px 이 올 수 있음.)
퍼센트나 px 일 경우 <가로><세로> | <가로> 중 하나
color-stop 적어도 두 개 이상의 색상 지정
  • color-stop1: 시작 색상
  • color-stop2: 끝 색상


size, extent-keyword

그라디언트 크기를 각 <width>, <height> 순서로 지정할 수 있으며, 세로는 생략 가능합니다. 아래는 가로 150 px, 세로 100 px 크기인 그라디언트를 만듭니다.

<style>
#gradient {
  background: radial-gradient(150px 100px, red, yellow, black);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>


가로 90%, 세로 100px 인 그라디언트를 만듭니다.

<style>
#gradient {
  background: radial-gradient(ellipse 90% 100px,
    red 10%, yellow 30%, black 80%);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>


다음은 extent-keyword 를 이용한 결과입니다.

<style>
#gradient1 {
  background: radial-gradient(circle closest-corner, white, black);
}
#gradient2 {
  background: radial-gradient(circle farthest-corner, white, black);
}
#gradient3 {
  background: radial-gradient(circle closest-side, white, black);
}
#gradient4 {
  background: radial-gradient(circle farthest-side, white, black);
}
</style>

<h4>closest-corner</h4>
<div id="gradient1" style="width:300px; height:100px"></div>

<h4>farthest-corner</h4>
<div id="gradient2" style="width:300px; height:100px"></div>

<h4>closest-side</h4>
<div id="gradient3" style="width:300px; height:100px"></div>

<h4>farthest-side</h4>
<div id="gradient4" style="width:300px; height:100px"></div>

closest-corner

farthest-corner

closest-side

farthest-side



color-stop

반지름형 그라디언트는 시작점에서 시작해서 끝점으로 동심원형을 그립니다. 모양은 타원이거나 원일 수 있습니다.

아래 그림처럼 0% 는 그라디언트의 중앙을, 100% 는 그라디언트의 끝지점을 나타내는데, 그 사이에 색상의 정지점을 지정하면 됩니다.


보통은 시작점과 끝점을 지정하는데, 그 사이에 다수의 정지점을 추가하여 다양한 색의 전환을 그리는 그라디언트를 그릴 수 있습니다.

위치는 %로 지정하지만 따로 정하지 않으면 이전 정지점과 다음 정지점 사이 중간 지점에 위치하게 됩니다.

색의 정지점은 오름차순이어야 합니다. 이전 정지점보다 퍼센트가 작으면 이전 정지점의 위치가 재설정되어 경계선을 그리게 됩니다.

<style>
#gradient {
  background: radial-gradient(ellipse, red, yellow, black);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>


처음 10% 는 완전한 빨강, 10%~30% 까지가 빨강에서 노랑으로, 30%~50%지점이 노랑에서 검정으로 전환되는 지점, 그리고 나머지 50% 가 완전한 검정색으로 채워집니다.

<style>
#gradient {
  background: radial-gradient(red 10%, yellow 30%, black 50%);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>


아래 예제는 노랑이 이전 정지점보다 앞이어서 경계선을 그리게 됩니다.

<style>
#gradient {
  background: radial-gradient(red 30%, yellow 10%, black 50%);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>



at position

포지션을 따로 정하지 않으면 기본적으로 가운데가 중심점이 되지만 포지션을 원하는 위치로 지정할 수 있습니다.

보통 <가로>, <세로> 순서이며 <세로>를 생략할 경우 center가 중심이 되며, 가로 방향은 왼쪽에서 오른쪽으로, 세로 방향은 위에서 아래로 그라디언트를 그립니다.

다음은 왼쪽, 상단 모서리가 중심이 됩니다.

<style>
#gradient {
  background: radial-gradient(at left top, red, yellow, black);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>


세로 값을 생략하였기 때문에 하단, center 가 중심입니다.

<style>
#gradient {
  background: radial-gradient(at bottom, red, yellow, black);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>


가로 방향으로 30% 지점, 세로 방향 80% 지점에 원형 그라디언트를 만듭니다.

<style>
#gradient {
  background: radial-gradient(circle at 30% 80%, red, yellow, black);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>


가로 방향으로 70% 지점, 상단에 원형 그라디언트를 만듭니다.

<style>
#gradient {
  background: radial-gradient(circle at 70% top, red, yellow, black);
}
</style>

<div id="gradient" style="width:200px; height:100px"></div>



반복 그라디언트

repeating-radial-gradient 를 이용하면 반복적인 그라디언트를 그릴 수 있습니다.

<style>
#gradient {
  background: repeating-linear-gradient(red, yellow 10%, blue 20%);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>


Tag:

0 Comments

0 댓글