-
[css] linear-gradientFrontEnd/HTML, CSS 2023. 9. 27. 14:24
linear-gradient() CSS 함수 (en-US)는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성합니다. 그 결과는 <gradient> 데이터 유형의 객체이며, 이는 <image>의 특별한 종류 중 하나입니다.
/* 45도 경사를 기준으로 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */ linear-gradient(45deg, blue, red); /* 오른쪽 아래에서 왼쪽 위로, 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */ linear-gradient(to left top, blue, red); /* 색이 중지되는 지점을 명시. 아래에서 위로 시작하여, 파란색에서 시작한 뒤 총 길이의 40% 지점에서 초록색으로 변화하고, 마지막에는 빨간색으로 변화하는 그라데이션 */ linear-gradient(0deg, blue, green 40%, red); /* 색상 힌트. 왼쪽에서 오른쪽으로, 빨간색에서 시작한 뒤 그라데이션의 길이의 10% 지점에서 중간 색상에 도달하여 나머지 90%의 길이는 파란색으로 변화하는 그라데이션 */ linear-gradient(.25turn, red, 10%, blue); /* 여러 색 중지 지점을 명시. 45도 경사를 기준으로 왼쪽 아래의 절반은 빨간색, 오른쪽 위의 절반은 파란색으로 뚜렷한 선을 기준으로 변화하는 그라데이션 */ linear-gradient(45deg, red 0 50%, blue 50% 100%); /* <side-or-corner> 그라데이션의 시작 지점의 위치. 이 값이 지정될 때에는 to라는 값과 함께 최대 2개의 키워드를 가질 수 있습니다. 한 경우는 left와 right 값을 통해 수평선을 의미하는 방식이고, 다른 경우는 top과 bottom을 이용해 수직선을 의미하는 방식입니다. 각 키워드의 순서는 중요하지 않습니다. 만약 이 값이 명시되지 않으면, 기본적으로 to bottom이 지정됩니다. to top, to bottom, to left, 그리고 to right은 각각 각도 0deg, 180deg, 270deg, 90deg과 동일합니다. 다른 값의 경우는 각도 그 자체로 해석됩니다. <angle> 그라데이션 선 방향의 각도. 0deg은 to top과 동일한 의미를 가지며 값이 증가할수록 시계 방향으로 회전합니다. 디폴트는 180deg, to bottom 임 <linear-color-stop> <color> 값의 색 중지점으로, 하나 혹은 두 개의 중지 위치에 대한 값이 뒤따라옵니다. 중지 위치에 대한 값은 그라데이션의 축을 따라 정해지는 <percentage> 혹은 <length> 값 입니다. <color-hint> 인접한 색상 중지점 사이에서, 그라데이션이 어떻게 색을 어떻게 변화시킬지를 정의하기 위한 보간 정보. 길이는 두 색상 중지점 사이의 어떤 지점에서 중간 색상에 도달해야 하는지를 명시합니다. 만약 이 값이 명시되지 않으면, 색상 변화의 중간지점은 두 색상 중지점의 중간이 됩니다. */
컨테이너를 반복하면서 채우는 선형 그라데이션을 생성하기 위해서는 repeating-linear-gradient() (en-US) 함수를 사용하세요.
참고: css 그라데이션의 색 중지점의 렌더링 방식은 SVG 그라데이션과 동일한 규칙
'FrontEnd > HTML, CSS' 카테고리의 다른 글
[html,css] canvas animation (ing) (0) 2023.09.27 canvas 정리 (0) 2023.09.27 [css] min(),max(),clamp() : css 함수를 통한 반응형 웹 (0) 2023.09.26 [CSS] shadcn ui - 공유 UI 컴포넌트 (0) 2023.08.09 css position에 대해 (0) 2022.11.25