CSS 색상 그라디언트

색상 그라디언트.

이 포스트는 제가 포스트를 작성하면서 가졌던 아이디어에서 비롯되었습니다. 명절 직전에 포스팅을 시작했습니다. 더 하고 싶었지만 시간이 없었다. 일반적인 모양을 사용하고 시간을 휴일로 제한하지 않으면 주제에 더 깊이 들어갈 수 있습니다.

이러한 예는 추악한 스웨터 게시물에 사용되는 HTML의 축소된 버전을 사용합니다. 구조는 동일합니다. 스타일링을 많이 제거했습니다.

<div>

    <div class="character">

        <div class="box box_purple_first_R"></div>

        <div class="box box_L"></div>

        <div class="box box_purple_first"> </div>

        <div class="box box_to_Top"></div>

    </div>
   </div>

선형 그라디언트

그라디언트는 둘 이상의 색상을 혼합하는 것입니다. 그들과 함께 창의적인 일을 할 수 있습니다. 선형 그래디언트가 가장 일반적입니다.

그림 1 그라디언트 1. 위에서 아래로(기본값), 2. 33%의 색상 중간점 전환, 3. 66%의 색상 중간점 전환, 4 파란색에서 보라색.

다음은 색상 그라데이션이 있는 네 개의 상자입니다. Box 클래스에는 모든 상자의 크기와 구조가 있습니다. 이 튜토리얼의 나머지 클래스는 사용된 그래디언트만 변경합니다.

첫 번째 상자에는 정상linear gradient이 있습니다. 색상은 위에서 아래로 균일하게 변경됩니다. 그러나 백분율을 사용하여 한 색상과 다른 색상의 비율을 변경할 수 있습니다. 두 번째 상자에서 색상 변경은 33%, 세 번째 상자는 66%, 마지막 상자에서는 먼저 최종 색상부터 시작하여 전환을 반대로 했습니다.

.box {
    height: 364px;
    width: 225px;
    border: 4px black solid;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px; 
    margin-top: 10px;
    overflow: hidden;
}

.box_purple_first {
    background: linear-gradient(
      var(--Purple), 
      var(--Blue)
    );
}

.box_33Percent {
    background: 
linear-gradient(
      var(--Purple) 33%, 
      var(--Blue)
    );
}

.box_66Percent {
    background: 
linear-gradient(
      var(--Purple) 66%, 
      var(--Blue)
    );

}

.box_blue_first {
  background: linear-gradient
              (var(--Blue), 
          var(--Purple));
}

속성은 동일하지만 색상이 빨간색과 노란색으로 변경됩니다.

그라디언트 1. 위에서 아래로(기본값), 2. 33%에서 색상 중간점 전환, 3. 66%에서 색상 중간점 전환, 4 노란색에서 빨간색으로.

.box_red_first {
    background: linear-gradient(
      var(--Red), 
      var(--Yellow)
    );
}


.box_red_33Percent {
    background: 
linear-gradient(
      var(--Red) 33%, 
      var(--Yellow)
    );
}

.box_red_66Percent {
    background: 
linear-gradient(
      var(--Red) 66%, 
      var(--Yellow)
    );

}

.box_yellow_first {
  background: linear-gradient(var(--Yellow), 
        var(--Red));
}

오른쪽으로 한 걸음

그라데이션 방향을 변경할 수 있습니다. 기본값은 위에서 아래로이지만 옆에서 옆으로 또는 아래에서 위로 변경할 수 있습니다.

그라디언트 1. 왼쪽 그라디언트to right, 2. to right로 33%에서 색상 중간점 전환, 3. to right로 66%에서 색상 중간점 전환, 4 to right로 파란색에서 보라색으로

이들은 그림 1과 동일한 속성 값을 사용하지만 방향이 추가되었습니다. 추가to right가 기본 색상에서 왼쪽에서 오른쪽으로 색상 전환을 어떻게 변경하는지 확인하십시오.

.box_purple_first_R {
    background: linear-gradient(to right,
      var(--Purple), 
      var(--Blue)
    );
}

.box_33Percent_R {
    background: 
linear-gradient(to right,
      var(--Purple) 33%, 
      var(--Blue)
    );
}

.box_66Percent_R {
    background: 
linear-gradient(to right,
      var(--Purple) 66%, 
      var(--Blue)
    );

}

.box_blue_first_R {
  background: linear-gradient( to right, var(--Blue), 
        var(--Purple));
}

그라데이션 방향: 보라색이 다양한 방향에서 파란색으로 전환됩니다. 1. 왼쪽부터 to right . 2. 오른쪽에서to Left , 3. 위에서 아래로(기본값), 4 아래쪽to top
다음은 to right , to left , 기본값 및 to top 의 예입니다.
마지막 상자를 주목하십시오. to top 버전은 그림 1의 마지막 상자와 동일하게 보입니다.

.box_purple_first_R {
    background: linear-gradient(to right,
        var(--Purple), 
        var(--Blue)
    );
}

.box_L {
    background: linear-gradient(to left,
      var(--Purple), 
      var(--Blue)
    );
}

.box_purple_first {
    background: linear-gradient(
      var(--Purple), 
      var(--Blue)
    );

}

.box_To_Top {
  background: linear-gradient( to top,
        var(--Purple), 
    var(--Blue));
}

대각선

빨강에서 노랑 그라데이션 1.0deg(기본값), 2. 45deg, 3. 90deg, 4 -45deg.

그라디언트는 각도를 사용하여 대각선 방향으로 갈 수도 있습니다. deg를 추가합니다. 이것은 0도가 있는 항목의 상단에서 시작하여 시계 방향으로 이동합니다. 180deg는 Botton 중심이고 상단에서 0에 도달할 때까지 음수입니다.

.box_red_first_angle {
    background: linear-gradient(
      var(--Red), 
      var(--Yellow)
    );
}


.box_red_angle {
    background: 
linear-gradient(45deg,
      var(--Red), 
      var(--Yellow)
    );
}

.box_red_90_angle {
    background: 
linear-gradient(90deg,
      var(--Red), 
      var(--Yellow)
    );

}

.box_yellow_neg45_angle {
  background: linear-gradient( -45deg, var(--Yellow), 
        var(--Red));
}

마무리

이것은 그라디언트를 사용하기 위한 몇 가지 팁일 뿐입니다. 당신이 즐겼기를 바랍니다.

-$JarvisScript git push

여기 또는 Twitter에서 저를 팔로우하세요.






크리스 자비스 | 풀스택 개발자 | 선적 서류 비치









dev.to/jarvisscript/c…의 "CSS Color Gradients"CSS Gradients로 할 수 있는 몇 가지 작업.


오후 13:29 - 2022년 4월 25일