[CSS] gradient

linear-gradient

몇개의 색상들이 선형으로 배치되는 선형 그라디언트

• 양수의 경우, 0도 부터 시계방향으로 적용된다! 음수는 반대.
• 기본 값 : [to bottom]

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]? 
    <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

1. 파라미터

1) <angle>

각도	키워드	방향
0deg	to top	위쪽 방향
90deg	to right	오른쪽 방향
180deg	to bottom	아래쪽 방향
270deg	to left	왼쪽 방향
45deg	to top right	오른쪽 위 방향
225deg	to bottom left	왼쪽 아래 방향

예시

하늘색에서 파란색으로 그라디언트

• 0deg (to top)
• 90deg (to right)
• 180deg (to bottom) : 기본값
  
  

• 270deg (to left)

• 45deg (to top right)
• 225deg (to bottom left)

2) <color-stop>

• linear-gradient(red, blue);
• linear-gradient(red 50%, blue 50%);
• linear-gradient(red 80%, blue);
• linear-gradient(red 80px, blue 150px, black 230px);

2. 활용 방법

repeat 상태에서 color, position, angle, size의 조합으로 여러가지 패턴을 만들 수 있다.

3. 프리픽스

background: -moz-linear-gradient(90deg, #ffffff 0%, #f1f1f1 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(100%, #ffffff)); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, #ffffff 0%, #f1f1f1 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, #ffffff 0%, #f1f1f1 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, #ffffff 0%, #f1f1f1 100%); /* ie10+ */
background: linear-gradient(0deg, #ffffff 0%, #f1f1f1 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ffffff',GradientType=0 ); /* ie6-9 */

radial-gradient

원형 그라디언트는 그라디언트의 center와 사이즈, 모양을 정의해야 한다.
기본값 : [circle at center] -> 색상값만 써도 됨

<radial-gradient> = radial-gradient(
  [ [ circle               || <length> ]                          [ at <position> ]? , | 
    [ ellipse              || [ <length> | <percentage> ]{2} ]    [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]                  [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

파라미터

1. <shape> 와 <length>

shape 키워드를 굳이 쓰지 않더라도, x축 길이 하나만 쓰면 정원, y축 길이까지 쓰면 타원으로 그려진다.

circle

그라디언트의 모양을 정원형으로 한다.

ellipse

• 그라디언트의 모양을 타원형으로 한다.
• 추가로 y축 방향의 길이를 쓸 수 있다.

2. 추가적인 키워드

length 대신 키워드를 사용할 수 있다

closest-side

ending shape가 그라디언트의 중심에서 가장 가까운 그라디언트 박스 모서리를 만나게끔 그라디언트된다.

farthest-side

ending shape가 그라디언트의 중심에서 가장 먼 그라디언트 박스 모서리를 만나게끔 그라디언트된다.

closest-corner

ending shape가 그라디언트의 중심에서 가장 가까운 꼭지점을 지나가게끔 그라디언트된다.

farthest-corner

ending shape가 그라디언트의 중심에서 가장 먼 꼭지점을 지나가게끔 그라디언트된다.

3. <position>

• (0, 0)
• (0, 100%)
• (100%, 0)
• (100%, 100%)

4. <color-stop>

• radial-gradient(red, blue);
• radial-gradient(red 50%, blue 50%);
• radial-gradient(red 80%, blue);
• radial-gradient(red 40px, blue 100px, black 160px);
  
  
  
  

활용 방법

repeat 상태에서 color, position, size, shape의 조합으로 여러가지 패턴을 만들 수 있다.

repeating-linear-gradient

파라미터 등은 linear-gradient와 같으나, 아래 코드와 같이 color-stop들이 무한히 반복된다.

linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)
repeating-linear-gradient(red 10px, blue 50px)

비교

repeating-radial-gradient

파라미터 등은 radial-gradient와 같으나, 아래 코드와 같이 color-stop들이 무한히 반복된다.

radial-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)
repeating-radial-gradient(red 10px, blue 50px)

비교

​