CSS3에서 선형 색상 그라데이션 구현

이 글에서는 Safari와 Chrome의 webkit 커널, Firefox의 Gecko 커널 등 CSS3에서 선형 색상 그라데이션을 구현하는 방법을 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다.

그라디언트를 표시하기 위해 특별히 제작한 것입니다. 이미지 접근 방식은 융통성이 없으며 금방 나쁜 습관이 될 수 있습니다. 하지만 안타깝게도 이 글을 쓰는 시점에서는 여전히 그래야 할 수도 있지만, 더 이상은 아니기를 바라겠습니다. Firefox와 Safari/Chrome 덕분에 이제 최소한의 노력으로 강력한 그라데이션을 얻을 수 있습니다. 이 기사에서는 CSS 그래디언트의 간단한 구현과 Mozilla 및 웹킷 브라우저에서 이 속성이 어떻게 다른지 보여줍니다.

Webkit

Mozilla와 Webkit은 일반적으로 CSS3 속성에 대해 동일한 구문을 채택하지만 그라디언트에 관해서는 불행히도 동의할 수 없습니다. Webkit은 그라디언트를 지원하는 최초의 브라우저 커널입니다.

/* 语法，参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)   
/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

이 구문이 여러분을 놀라게 할 것이라고 걱정하지 마세요. 저도 그렇습니다! 매개변수 그룹을 쉼표로 구분해야 한다는 점만 기억하세요.

그라디언트 유형(선형)
그라디언트 시작의 X 및 Y 축 좌표(0 0 – 또는 왼쪽 상단)
그라디언트 끝의 X 및 Y 축 좌표(0 100% 또는 왼쪽) -bottom)
시작 색상? (from(red) ))
종료 색상? (to(blue))

Mozilla

Firefox는 버전 3.6의 그래디언트만 지원하며 Webkit과 약간 다른 구문을 선호합니다.

/* 语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */
-moz-linear-gradient( [ <point> || <angle>,]? <stop>, <stop> [, <stop>]* )    
/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);

속성 접두사에 그라데이션 유형(선형)을 넣었다는 점에 유의하세요.
그라데이션은 어디에서 시작되나요?(위 - -45deg와 같은 각도도 사용할 수 있습니다.)
어떤 색상으로 시작하나요? (빨간색)
엔딩 컬러? (파란색)

Color-Stops

한 색상에서 다른 색상으로 100% 그라데이션이 필요하지 않다면 어떨까요? 이때 색상 정지가 시작됩니다. 일반적인 디자인 기법은 다음과 같이 짧고 미묘한 그라데이션을 사용하는 것입니다.

상단의 밝은 회색에서 흰색으로 미묘한 그라데이션을 확인하세요.

과거에는 표준 접근 방식은 이미지를 만들고 이를 다음과 같이 설정하는 것이었습니다. 수평으로 타일링되는 요소의 배경 이미지입니다. 그러나 CSS3의 경우 이는 작은 경우입니다.

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);     
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white)); border-top: 1px solid white;

이번에는 그라데이션 끝을 기본 100%가 아닌 8%로 만들어 보겠습니다. 대조를 위해 헤더에 테두리도 사용했습니다. 이것은 매우 일반적으로 사용됩니다.

색을 하나 더 추가하려면 다음과 같이 하면 됩니다.

background: white; /* 备用属性 */ background: -moz-linear-gradient(top, #dedede, white 8%, red 20%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

-moz 버전의 경우 요소 높이의 20%부터 빨간색으로 정의합니다.
-webkit의 경우 시작 위치와 사용할 색상이라는 두 가지 매개변수를 사용하는 color-stop을 사용합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

아름다운 드롭다운 탐색 효과를 얻기 위한 CSS 정보

CSS를 사용하여 원근감 효과를 얻는 방법

위 내용은 CSS3에서 선형 색상 그라데이션 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!