CSS 그라데이션 파악 - 필독!

45254 단어 programming css showdev javascript

CSS의 그래디언트에 대해 이야기할 때 색상의 그래디언트에 대해 이야기합니다.
css의 점차적인 변화를 쉽게 파악할 수 있는 궁극적인 댓글입니다!
나는 너희들이 이 문장을 너희가 어느 곳에서든 찾은 모든 사람에게 공유하는 것을 도울 수 있기를 바란다.

CSS에는 두 가지 유형의 그래디언트가 있습니다.

선형: 색상은 한 점에서 다른 점까지 직선

반지름: 원심에서 가장자리까지 색상

사다리는 배경 이미지로 간주되며 해당 속성을 사용해야 합니다.

선형 경사도
선형 점차적인 문법은 quite complex이지만 기본 사상은 정의이다.

원하는 색상

, 이 색상들은 반드시 축을 따라 나타나야 한다(시작, 중간, 끝 등).

경사가 어느 방향으로 이동해야 하는지

간단한 2색 그래디언트부터 시작하겠습니다.

div{ background-image: linear-gradient(red, blue);}



<div>A simple vertical background gradient</div>

간단한 수직 배경 사다리
기본값:

방향은 수직으로 위에서 아래로

첫 번째 색상 시작(상단)

두 번째 색상은 끝(아래)

방향을 바꾸다
위에서 아래로 방향이 적합하지 않으면 다음과 같이 변경할 수 있습니다.

은 점차적인 목적지를 정의하고 키워드는 to left top이다

은 45 deg과 같은 특정 각도를 정의합니다.

이 방향은 색상 앞에 설정해야 합니다.

div{ background-image: linear-gradient(to bottom right, yellow, purple); width: 200px;}

<div>A diagonal gradient from the top left corner to the bottom right one</div>

왼쪽 상단에서 왼쪽 하단까지의 대각선 점차적 변화
보다 구체적인 각도가 필요한 경우 도 값을 사용할 수 있습니다.

0deg은 기본값이며 위에서 아래로

입니다.

20deg 약간 대각선, 시계 방향으로

90deg은 오후 3시처럼 오른쪽에서 왼쪽으로

180deg 아래에서 위로

div{ background-image: linear-gradient(20deg, green, blue); width: 150px;}

<div>A diagonal gradient with an angle of 20 degrees</div>

20도 각도의 대각선 경사가 있다

추가 색상 추가
여러 색상을 삽입할 수 있습니다.축선을 따라 균일하게 분포됩니다.

2가지 색상: 0% 및 100%

3가지 색상: 0%, 50% 및 100%

4가지 색상: 0%, 33%, 67%, 100%

div{ background-image: linear-gradient(orange, grey, yellow); width: 150px;}

<div>A rather ugly gradient, but you get the idea</div>

상당히 추악한 계단이지만, 너는 알았다

특정 색상 중지 설정
균일한 색상 분포를 원하지 않는 경우 백분율 % 또는 픽셀 px을 사용하여 특정 색상 정지 위치를 설정할 수 있습니다.

div{ background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px;}

<div>An even uglier gradient, but you get the idea</div>

더 못생긴 점차적인 변화, 하지만 알겠어
이 설정에서는 다음을 수행합니다.

orange에 중지 위치가 없으므로 기본값은 0 0%입니다.

grey은 10%이 아닌 50%의 상단에 가깝습니다.

yellow은 50%에서 100%까지의 절반을 차지한다

레이디얼 경사도
선형 그래디언트는 직선 축을 따르고 레이디얼 그래디언트는 여러 방향으로 확장됩니다.그것들의 문법은 모두 색깔이 멈추기 때문에 선형과 상당히 유사하다.그러나 지정해야 할 방향을 지정하는 것은 아닙니다.

형태: 원형 또는 타원형

a 시작점: 원/타원

의 중심이 됩니다.

끝점: 원/타원의 가장자리가 있는 위치

div{ background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px;}

<div>This looks like the sun, doesn't it?</div>

이것은 보기에 태양 같지 않습니까?

기본값:

그라데이션은 타원입니다.

첫 번째 색상은 중심에서 시작합니다.

마지막 색상은 가장 먼 구석에서 끝납니다.

시작 위치
시작 위치의 작업 원리는 background positions과 유사하다.at 키워드로 설정합니다.

div{ background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px;}

<div>A gloomy day.</div>

음침한 하루.

끝 위치
기본적으로 형태는 가장 먼 각도로 끝납니다.다음을 선택할 수 있습니다.

closest-side

closest-corner

farthest-side

farthest-corner

양자의 차이는 이해하기도 어렵고 상상하기도 어려워서 나는 상세하게 말하지 않겠다.Mozilla에는 good description of the different values이 있습니다.

div{ background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
div:hover{ background-image: radial-gradient(farthest-side at 20px 20px, green, blue)}

<div>Hover this green star in the sky to see it expand.</div>

이 녹색 별을 하늘에 걸어서 어떻게 확장하는지 보아라.

고정 치수
시작점과 끝점을 동시에 설정할 필요는 없고 특정 치수만 설정하면 됩니다.

div{ background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px;}

<div>A small violet disc in a sea of pink.</div>

분홍색 바다 속의 자줏빛 작은 원반.
옵션의 무제한성을 고려하면 CSS 그래디언트는 매우 강력합니다.
모든 속성이 어떻게 작동하는지 더 잘 설명하기 위해 본 페이지의 예는 자발적으로'추악한'것으로 뚜렷한 색깔 차이를 가지고 있다.
그러나 더욱 미묘한 점차적인 변화를 작성하는 것은 매우 쉽다. 특히 단추의 경우

.button-grey  { background-image: linear-gradient(#f2f2f2, #f2f2f2);}
.button-yellow{ background-image: linear-gradient(#fce374, #fcdf5b);}
.button-orange{ background-image: linear-gradient(#f58a38, #f57c20);}
.button-red   { background-image: linear-gradient(#ed6d64, #ed574c);}
.button-purple{ background-image: linear-gradient(#847bba, #7568ba);}
.button-blue  { background-image: linear-gradient(#42b0e3, #2ba9e3);}
.button-green { background-image: linear-gradient(#97cc76, #8bcc62);}

<div class="result" id="result-832">
  <a class="button-grey">Button</a>
  <a class="button-yellow">Button</a>
  <a class="button-orange">Button</a>
  <a class="button-red">Button</a>
  <a class="button-purple">Button</a>
  <a class="button-blue">Button</a>
  <a class="button-green">Button</a>
</div>


<style type="text/css">
#result-831{ padding: 1rem;}
#result-831 div{ background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
#result-831 div:hover{ background-image: radial-gradient(farthest-side at 20px 20px, green, blue)}
#result-832{ padding: 1rem;}
#result-832 a{ background-image: linear-gradient(lightblue, skyblue); border: 1px solid #eee; border-radius: 3px; color: grey; display: inline-block; line-height: 32px; padding: 0 15px; text-decoration: none; transition: none; vertical-align: top;}
#result-832 .button-grey {
  background-color: #f2f2f2;
  background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
  border: 1px solid #bfbfbf;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #8c8c8c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#result-832 .button-grey:hover, #result-832 .button-grey:focus {
  background: #f2f2f2;
  border-color: #8c8c8c;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
#result-832 .button-grey:active {
  background: #f2f2f2;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-blue {
  background-color: #42b0e3;
  background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);
  border: 1px solid #107db0;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-blue:hover, #result-832 .button-blue:focus {
  background: #2ba9e3;
  border-color: #004c6f;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3;
}
#result-832 .button-blue:active {
  background: #2ba9e3;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-green {
  background-color: #97cc76;
  background-image: linear-gradient(to bottom, #97cc76, #8bcc62);
  border: 1px solid #5f993a;
  box-shadow: inset 0 1px 0 #c6e5b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-green:hover, #result-832 .button-green:focus {
  background: #8bcc62;
  border-color: #326612;
  box-shadow: inset 0 1px 0 #c6e5b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b;
}
#result-832 .button-green:active {
  background: #8bcc62;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-purple {
  background-color: #847bba;
  background-image: linear-gradient(to bottom, #847bba, #7568ba);
  border: 1px solid #493e87;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-purple:hover, #result-832 .button-purple:focus {
  background: #7568ba;
  border-color: #1f1654;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba;
}
#result-832 .button-purple:active {
  background: #7568ba;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-orange {
  background-color: #f58a38;
  background-image: linear-gradient(to bottom, #f58a38, #f57c20);
  border: 1px solid #c25706;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-orange:hover, #result-832 .button-orange:focus {
  background: #f57c20;
  border-color: #773300;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851;
}
#result-832 .button-orange:active {
  background: #f57c20;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-red {
  background-color: #ed6d64;
  background-image: linear-gradient(to bottom, #ed6d64, #ed574c);
  border: 1px solid #ba3329;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-red:hover, #result-832 .button-red:focus {
  background: #ed574c;
  border-color: #870c03;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b;
}
#result-832 .button-red:active {
  background: #ed574c;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-yellow {
  background-color: #fce374;
  background-image: linear-gradient(to bottom, #fce374, #fcdf5b);
  border: 1px solid #c9ae34;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #967d09;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#result-832 .button-yellow:hover, #result-832 .button-yellow:focus {
  background: #fcdf5b;
  border-color: #967d09;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d;
}
#result-832 .button-yellow:active {
  background: #fcdf5b;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
</style>

다음 읽기:

              10 Minutes to master almost anything!

Reference

이 문제에 관하여(CSS 그라데이션 파악 - 필독!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anicode/master-css-gradients-must-read-225j

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

js url 주소 매개 변수 인 스 턴 스 가 져 오기

js 폼 이 제출 한 데 이 터 를 가 져 오고 다른 폼 노트 를 수정 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다