[그래픽 효과] 그라데이션(gradient)/color-stop()

[그래픽 효과] 그라데이션(gradient)/color-stop()

그라데이션에 대해 앞에서도 다룬적이 있지만 여기서 다른 방식으로 한번더 다루어 보도록 하겠습니다.
CSS3에서 그라데이션 사각형을 만드려면 background 속성(혹은 background-image 속성)에 gradient() 메서드로 값을 지정합니다.

-webkit-gradient(
linear,
시작위치, 종료위치
from(처음색), to(마지막 색));

시작 위치와 종료 위치는 top, bottom, left, right를 조합하여 지정합니다.
아래 코드는 왼쪽 위에서 오른쪽 아래로 그라데이션을 적용 시 코드조합입니다.

.box1{
     background:
        -webkit-gradient(linear,
             left top,
             right bottom,
             from(red), to(white));
}

만약 위에서 아래로 그라데이션을 적용하려면 left top과 left bottom을 지정하면 됩니다.

color-stop() 메서드를 이용해 색을 지정해보겠습니다.

color-stop(위치, 색)

'위치'는 그라데이션 색을 0~1 사이의 어디에 배치할지를 지정합니다.