이번에는 배경에 한가지 색상이 아닌 두개의 색상을 사용하여 그래디언트 효과를 나타내는 방법에 대해서 알아보겠습니다.
background: linear-gradient();
그래디언트를 적용하고자 하는 색상 두개의 값(파란색 #0000FF, 녹색 #008000)을 넣어보겠습니다.
/* CSS */
background: linear-gradient(#0000FF,#008000);
기본 설정으로 위에서 아래로 그래디언트가 적용된 것을 확인할 수 있습니다.
왼쪽에서 오른쪽으로 그래디언트를 적용하려면 다음과 같이 코드를 넣으면 됩니다.
/* CSS */
background: linear-gradient(to right, #0000FF,#008000);
이와 반대로 녹색을 왼쪽으로 파란색을 왼쪽으로 하려면 to right 대신에 to left를 집어 넣어 주시거나, 색상의 값을 앞뒤를 바꾸어 적으면 됩니다.
/* CSS */
background: linear-gradient(to left, #0000FF,#008000);
대각선으로도 그래디언트를 적용할 수 있습니다. to left 대신에 to bottom right을 사용해 보겠습니다.
/* CSS */
background: linear-gradient(to bottom right, #0000FF,#008000);
여기서 더 나아가 색상에 0부터 100% 사이의 인자값을 추가하여 지정하면, 색상이 변경 완료되는 범위를 지정할 수 있습니다. 파란색에 10% 녹색에 60%를 지정해 보겠습니다.
/* CSS */
background: linear-gradient(to bottom right, #0000FF 10%,#008000 60%);
좌측 상단부터 10% 부분까지 파란색 단색으로 표시되고 그래디언트가 시작이 되며 60% 지점에서 녹색 단색이 표시됩니다.
다음으로 파란색은 %지정을 하지않고, 녹색에 10%를 적용해 보겠습니다. 좌측 상단에서 바로 그래디언트가 시작이 되서 10%부분에서 녹색이 나타나게 됩니다.
/* CSS */
background: linear-gradient(to bottom right, #0000FF,#008000 10%);
여기서 해당 그래디언트가 반복이 되도록 해보도록 하겠습니다.
linear-gradient 앞에 repeating-를 붙여줍니다.
/* CSS */
background: repeating-linear-gradient(to bottom right, #0000FF,#008000 10%);
그래디언트가 총 10번 반복되는 것을 확인할 수 있습니다.
background: radial-gradient();
이번에는 원형 그래디언트를 알아보겠습니다.
파란색과 녹색을 순서대로 넣으면 가운데가 파란색부터 시작해서 가장자리로 갈수록 녹색으로 그래디언트가 적용됩니다.
/* CSS */
background: radial-gradient(#0000FF,#008000);
선형 그래디언트 처럼 원형 그래디언트도 반복하는 기능을 넣을 수 있습니다.
10% 위치에서 그래디언트를 완성하고 10번 반복하도록 해보겠습니다.
/* CSS */
background: repeating-radial-gradient(#0000FF,#008000 10%);
여기까지 CSS 그래디언트에 대해서 알아보았습니다. ^^
댓글