01 of 04
CSS3를 사용하여 크로스 브라우저 선형 그라디언트 만들기
선형 그라디언트
가장 일반적인 유형의 그래디언트는 두 가지 색상의 선형 그래디언트입니다. 이것은 그라디언트가 첫 번째 컬러에서 두 번째 라인으로 점진적으로 바뀌는 직선으로 이동한다는 것을 의미합니다. 이 페이지의 이미지는 # 999 (진회색)에서 #fff (흰색)까지 간단한 왼쪽에서 오른쪽으로 기울기를 보여줍니다.
선형 그래디언트는 가장 쉽게 정의 할 수 있으며 브라우저에서 가장 많이 지원됩니다. CSS3 선형 그래디언트는 Android 2.3 이상, Chrome 1 이상, Firefox 3.6 이상, Opera 11.1 이상 및 Safari 4 이상에서 지원됩니다. Internet Explorer는 필터를 사용하여 그라디언트를 추가하고 IE 5.5로 다시 지원합니다. 이것은 CSS3가 아니지만 브라우저 간 호환성을위한 옵션입니다.
그래디언트를 정의 할 때 몇 가지 다른 것들을 정의해야합니다 :
- 선형 또는 방사형의 어떤 유형의 기울기입니까?
- 그래디언트가 시작되는 위치
- 그래디언트가 멈출 곳
- 그라디언트의 색상과 시작 및 중지 위치
CSS3를 사용하여 선형 그래디언트를 정의하려면 다음과 같이 작성합니다.
선형 그래디언트 ( 각도 또는 측면 또는 구석 , 컬러 스톱 , 컬러 스톱 )
- 먼저 linear -gradient라는 이름으로 그라데이션 유형을 정의하십시오.
- 그런 다음 그라디언트의 시작 및 중단 지점을 두 가지 방법 중 하나로 정의합니다. 각도 0에서 359까지의 각도 (0 도가 위로 향함)입니다. 또는 왼쪽, 오른쪽, 아래쪽 및 위쪽과 같은 "측면 또는 모서리"기능을 사용합니다. 이것들은 다음 페이지에서 더 자세히 설명 될 것입니다. 이 부분을 생략하면 그라디언트가 요소의 맨 위에서 맨 아래로 흐르게됩니다.
- 그런 다음 색상 정지를 정의합니다. 색상 코드와 옵션 백분율로 색상 멈춤 점을 정의합니다. 비율은 브라우저에서 해당 색상으로 시작하거나 끝나는 위치를 알려줍니다. 기본값은 선을 따라 색상을 균등하게 배치하는 것입니다. 3 페이지의 색상 정지에 대해 더 배우게됩니다.
CSS3를 사용하여 위의 그래디언트를 정의하려면 다음과 같이 작성하십시오.
선형 그래디언트 (왼쪽, # 999999 0 %, #ffffff 100 %);
그리고 당신이 작성한 DIV의 배경으로 그것을 설정하려면 :
div {
배경 이미지 : 선형 그래디언트 (왼쪽, # 999999 0 %, #ffffff 100 %;
}
CSS3 선형 그라디언트 용 브라우저 확장
그라디언트가 교차 브라우저에서 작동하도록하려면 대부분의 브라우저에서 브라우저 확장을 사용하고 Internet Explorer 9 이하에서는 필터를 사용해야합니다 (실제로는 2 개의 필터). 이들 모두는 그라디언트를 정의하는 데 동일한 요소를 사용합니다 (단, IE에서는 2 색 그라디언트 만 정의 할 수 있습니다).
Microsoft 필터 및 확장 - 다른 브라우저 버전을 지원하기 위해 세 가지 다른 회선이 필요하기 때문에 Internet Explorer가 지원하기가 가장 어렵습니다. 위의 회색을 흰색 그라디언트로 바꾸려면 다음과 같이 작성하십시오.
/ * IE 5.5-7 * /
필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter : "progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 10 * /
-ms-linear-gradient (왼쪽, # 999999 0 %, #ffffff 100 %);
Mozilla Extension -moz- extension은 -moz- extension과 함께 CSS3 속성과 같이 작동합니다. 위의 Firefox 그래디언트를 얻으려면 다음을 작성하십시오.
-moz-linear-gradient (왼쪽, # 999999 0 %, #ffffff 100 %);
오페라 확장 -이 확장은 오페라 11.1+에 그라디언트를 추가합니다. 위의 그래디언트를 얻으려면 다음을 작성하십시오.
-o-linear-gradient (왼쪽, # 999999 0 %, #ffffff 100 %);
Webkit Extension -webkit- 확장은 CSS3 속성과 매우 유사합니다. Safari 5.1 이상 또는 Chrome 10 이상에서 위의 그래디언트를 정의하려면 다음을 작성하십시오.
-webkit-linear-gradient (왼쪽, # 999999 0 %, #ffffff 100 %);
Chrome 2 이상 및 Safari 4 이상에서 작동하는 이전 버전의 Webkit 확장도 있습니다. 여기에서는 속성 이름 대신 그라디언트 유형을 값으로 정의합니다. 이 확장 기능을 사용하여 회색에서 흰색으로 기울기를 얻으려면 다음을 작성하십시오.
-webkit-gradient (선형, 왼쪽 위, 오른쪽 상단, 컬러 스톱 (0 %, # 999999), 컬러 스톱 (100 %, # ffffff));
전체 CSS3 선형 그라데이션 CSS 코드
위의 회색에서 흰색 그라디언트를 얻으려면 전체 크로스 브라우저 지원을 위해 그라디언트를 지원하지 않는 브라우저에 대체 색상을 먼저 포함하고 마지막 항목은 완전히 호환되는 브라우저에 대해 CSS3 스타일이어야합니다. 그래서, 여러분은 다음과 같이 씁니다 :
배경 : # 999999;
배경 : -moz-linear-gradient (왼쪽, # 999999 0 %, #ffffff 100 %);
배경 : -webkit-gradient (선형, 왼쪽 위, 오른쪽 위, 컬러 스톱 (0 %, # 999999), 컬러 스톱 (100 %, # ffffff));
배경 : -webkit-linear-gradient (왼쪽, # 999999 0 %, #ffffff 100 %);
배경 : -o 선형 그라디언트 (왼쪽, # 999999 0 %, #ffffff 100 %);
배경 : -ms-linear-gradient (왼쪽, # 999999 0 %, #ffffff 100 %);
필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
배경 : 선형 그래디언트 (왼쪽, # 999999 0 %, #ffffff 100 %);
이 튜토리얼의 다음 페이지에서는 그라디언트 부분을보다 자세히 설명하고 마지막 페이지에서는 자동으로 CSS3 그라디언트를 만드는 훌륭한 방법 인 도구를 소개합니다.
CSS를 사용하여이 선형 그래디언트 그라디언트를 볼 수 있습니다.
02 of 04
대각선 그라디언트 만들기 - 그라디언트의 각도
시작 및 정지 점은 그라데이션의 각도를 결정합니다. 대부분의 선형 그라디언트는 위에서 아래 또는 왼쪽에서 오른쪽입니다. 그러나 대각선을 따라 움직이는 그라디언트를 만드는 것이 가능합니다. 이 페이지의 이미지는 이미지에서 오른쪽에서 왼쪽으로 45도 각도로 움직이는 간단한 그라디언트를 보여줍니다.
그라디언트 선을 정의하는 각도
각도는 요소의 중심에있는 가상 원의 선입니다. 0도 점은 위로, 90도 점은 오른쪽으로, 180도 점은 아래로, 270도 점은 왼쪽을 향합니다. 0도에서 359도 사이의 각도를 정의 할 수 있습니다.
사각형에서 45도 각도는 왼쪽 위 모서리에서 오른쪽 하단으로 이동하지만 직사각형에서는 이미지에서 볼 수있는 것처럼 시작점과 끝점이 약간 외곽에 있습니다.
대각선 그라데이션을 정의하는 가장 일반적인 방법은 오른쪽 상단과 같은 모서리를 정의하는 것입니다. 그라디언트는 해당 모서리에서 반대쪽 모서리로 이동합니다. 다음 키워드를 사용하여 시작 위치를 정의 할 수 있습니다.
- 상단
- 권리
- 바닥
- 왼쪽
- 센터
그리고 그것들은 더 구체적으로 결합 될 수 있습니다 :
- 맨 위 오른쪽
- 왼쪽 상단
- 상단 중앙
- 오른쪽 하단
- 왼쪽 하단
- 하단 중앙
- 오른쪽 중앙
- 왼쪽 중앙
다음 그림과 비슷한 그래디언트의 CSS가 빨간색에서 흰색으로 오른쪽 상단에서 왼쪽 하단으로 이동합니다.
배경 : ## 901A1C;
배경 이미지 : -moz-linear-gradient (오른쪽 상단, # 901A1C 0 %, # FFFFFF 100 %);
background-image : -webkit-gradient (선형, 오른쪽 위, 왼쪽 아래, 컬러 스톱 (0, # 901A1C), 컬러 스톱 (1, #FFFFFF));
배경 : -webkit-linear-gradient (오른쪽 상단, # 901A1C 0 %, #ffffff 100 %);
배경 : -o 선형 그래디언트 (오른쪽 상단, # 901A1C 0 %, #ffffff 100 %);
배경 : -ms-linear-gradient (오른쪽 상단, # 901A1C 0 %, #ffffff 100 %);
배경 : 선형 그래디언트 (오른쪽 상단, # 901A1C 0 %, #ffffff 100 %);
이 예에서는 IE 필터가 없다는 것을 알았을 것입니다. IE는 두 가지 유형의 필터 만 허용하기 때문에 위쪽에서 아래쪽 (기본값)과 왼쪽에서 오른쪽 (GradientType = 1 스위치 사용)이 있습니다.
CSS를 사용하여 대각선 선형 그래디언트를 볼 수 있습니다.
03 of 04
컬러 스톱
CSS3 선형 그라디언트를 사용하면 그라디언트에 여러 색상을 추가하여 더 멋진 효과를 만들 수 있습니다. 이 색상을 추가하려면 속성 끝에 쉼표로 구분 된 색상을 추가하십시오. 색상이 시작되거나 끝나는 라인을 포함시켜야합니다.
Internet Explorer 필터는 두 가지 색상 중지 만 지원하므로이 그라디언트를 작성할 때 표시 할 첫 번째 및 두 번째 색상 만 포함해야합니다.
위의 3 색 그라디언트에 대한 CSS는 다음과 같습니다.
배경 : #ffffff;
배경 : -moz-linear-gradient (왼쪽, #ffffff 0 %, # 901A1C 51 %, #ffffff 100 %);
배경 : -webkit-gradient (선형, 왼쪽 위, 오른쪽 상단, 컬러 스톱 (0 %, # ffffff), 컬러 스톱 (51 %, # 901A1C), 컬러 스톱 (100 %, # ffffff));
배경 : -webkit-linear-gradient (왼쪽, #ffffff 0 %, # 901A1C 51 %, # ffffff 100 %);
배경 : -o 선형 그라디언트 (왼쪽, #ffffff 0 %, # 901A1C 51 %, # ffffff 100 %);
배경 : -ms-linear-gradient (왼쪽, #ffffff 0 %, # 901A1C 51 %, # ffffff 100 %);
필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
배경 : 선형 그래디언트 (왼쪽, #ffffff 0 %, # 901A1C 51 %, # ffffff 100 %);
CSS 만 사용하여 세 가지 색상 멈춤 점이있는 선형 그래디언트를 확인하십시오.
04 04
건물 그라디언트 쉽게 만들기
그라디언트를 구축하는 데 도움이되는 두 개의 사이트가 있습니다. 각 사이트에는 장점과 단점이 있으며 아직 모든 것을 수행하는 그라디언트 빌더를 찾지 못했습니다.
궁극적 인 CSS 그라데이션 생성기
이 그라디언트 생성기는 Photoshop과 같은 프로그램에서 그래디언트 빌더와 비슷한 방식으로 수행되기 때문에 매우 인기가 있습니다. 또한 웹킷과 모질라가 아닌 모든 CSS 확장 기능을 제공하기 때문에 좋아합니다. 이 생성기의 문제점은 가로 및 세로 그라디언트 만 지원한다는 것입니다. 대각선 그라디언트를 원하면 다른 발전기로 가야합니다.
CSS3 그라디언트 생성기
이 발전기는 첫 번째 것보다 이해하는 데 조금 시간이 걸렸지 만 방향을 대각선으로 변경하는 것을 지원합니다.
이보다 더 좋은 CSS Gradient Generator를 알고 있다면 알려주십시오 .