ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [css] linear-gradient
    FrontEnd/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
Designed by Tistory.