CSS3 선형 그라디언트 [CSS3 팁]
구배 CSS3의 훌륭한 색상 기능 추가입니다. 단일 색상 만 추가하는 대신 이미지에 의존하지 않고 하나의 선언 블록에 여러 색상 조합을 추가 할 수 있으므로 웹 사이트의 HTTP 요청이 줄어들어 웹 사이트로드가 빨라질 수 있습니다.
CSS3에서 그라디언트를 가지고 놀았다면 두 가지 방법, 즉 방사형 및 선형 그라디언트에 익숙 할 것입니다. 오늘의 게시물은 후자에 관한 것입니다.
그라디언트 만들기
스펙에 따르면 CSS3의 그래디언트는 이미지이기 때문에 다른 새로운 기능 추가와 같은 특별한 속성이 없기 때문에 CSS3를 사용하여 선언됩니다. 배경 이미지 속성 대신.
그래디언트의 전체 구문을 살펴보면 조금 생겼습니다. 과장된, 어떤 사람들에게는 혼란을 가져올 수있다..
div background-image : -webkit-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); 배경 이미지 : -moz-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); background-image : -ms-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); background-image : -o-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); 배경 이미지 : 선형 그래디언트 (위쪽, # FF5A00 0 %, # FFAE00 100 %);
그럼 문법의 각 부분을 하나씩 파헤쳐서 더 명확하게 해봅시다..
우선, 선형 그래디언트는 선형 - 그래디언트 () 기능. 이 함수에는 세 가지 기본 값이 있습니다. 첫 번째 값은 그래디언트 시작 위치를 정의합니다. 다음과 같이 설명이 포함 된 키워드를 사용할 수 있습니다. 상단 그라디언트를 시작하려면 상단;
div 배경 이미지 : 선형 그래디언트 (위쪽, # FF5A00, # FFAE00);
위의 스 니펫은 W3C의 그라디언트 작성 공식 버전입니다. 그것은 실제로 더 간단하고 아주 자명하며 다음과 같은 그라디언트를 생성합니다.
당신은 또한 사용할 수 있습니다 바닥 그 반대, 그렇지 않으면 할 권리 과 왼쪽.
또한 대각선 그라디언트를 사용하여 각도 그라디언트 시작 위치로 지정합니다. 다음은 그 예입니다.
div 배경 이미지 : 선형 그래디언트 (45deg, # FF5A00, # FFAE00);
위의 스 니펫은 다음과 같은 색상 그라디언트를 만듭니다.
함수의 두 번째 값은 첫 번째 색 정보 및 정지 위치 백분율로 표시됩니다. 정지 위치는 실제로 선택 사항입니다. 브라우저는 적절한 위치를 결정할 정도로 영리합니다. 따라서 브라우저가 첫 번째 색상의 멈춤을 지정하지 않으면 0 % 기본값으로.
그리고 다음 값은 두 번째 색 콤비네이션. 이전 값과 동일하게 적용됩니다. 마지막으로 적용된 색상 인 경우에만 적용됩니다. 정지 위치, 가치 100 % 기본값으로 사용됩니다. 이제 아래 예제를 살펴 보겠습니다.
div 배경 이미지 : 선형 그래디언트 (위쪽, # FF5A00 0 %, # FFAE00 100 %);
위의 스 니펫은 이전에 보았던 것과 같은 그라디언트를 만들지 만 (차이는 없음) 이제는 색상 멈춤 위치를 지정합니다.
이제 컬러 스톱, 이번에는 50 % 첫 번째 색상과 51 % 두 번째 색깔은 어떻게되는지 보자.
div 배경 이미지 : 선형 그래디언트 (위쪽, # FF5A00 50 %, # FFAE00 51 %);
투명도
만들기 투명도 그래디언트로도 가능합니다. 효과를 만들기 위해 색상을 변환해야합니다. 마녀 으로 rgba 모드를 선택하고 알파 채널을 낮 춥니 다..
div background-image : 선형 그래디언트 (top, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
위의 스 니펫은 색상 강도를 20 %, 그래디언트가 다음과 같이 바뀝니다.
여러 색상
더 많은 색상을 추가하려면 쉼표 구분 기호가있는 다른 색상 옆에 색상을 추가하고 브라우저가 각 색상 정지 위치를 결정하게하십시오..
div 배경 이미지 : 선형 그라디언트 (위쪽, 빨간색, 주황색, 노란색, 녹색, 파란색, 쪽빛, 보라색);
위의 발췌 문장은 다음 무지개를 만듭니다..
브라우저 호환성
불행하게도이 글을 쓰는 시점에서 모든 현재 브라우저는 아직 표준 구문을 지원하지 못했습니다. 그들은 여전히 공급 업체 접두어가 필요합니다 (-웹킷-, -모즈-, -ms- 과 -영형-). 그래서 전체 구문은 다음과 같이 나타납니다.
div background-image : -webkit-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); 배경 이미지 : -moz-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); background-image : -ms-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); background-image : -o-linear-gradient (맨 위, # FF5A00 0 %, # FFAE00 100 %); 배경 이미지 : 선형 그래디언트 (위쪽, # FF5A00 0 %, # FFAE00 100 %);
반면에 인터넷 익스플로러는 특히 버전 9 이하는 표준과는 거리가 멀다. 다음의 그래디언트 IE9 아래에 필터, 이러한 브라우저에 그래디언트를 추가하려면 다음과 같이 작성해야합니다.
div filter : progid : DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
그만큼 필터 첫 번째로 세 가지 색상을 추가 할 수 없으며 투명도 효과를 만드는 것도 약간 까다 롭습니다. rgba, 그러나 IE 필터 용도 #ARGB;
div filter : progid : DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
다음은 전환을 돕는 도구입니다. rgba 에 #ARGB.
- 데모
- 소스 다운로드
구문을 더 빨리 작성하기
위에서 볼 수 있듯이 브라우저간에 그라디언트 호환성을 유지하려면 비효율적 인 5 줄의 코드를 더 추가해야합니다.
우리가 작업을 단순화하기 위해 할 수있는 많은 방법이 있습니다. 코드를 컴파일하는 데 Prefix-free, Prefixr, LESS 또는 Sass를 사용하는 것과 같지만, 무엇보다도이 도구 인 ColorZilla Gradient를 사용하는 것이 좋습니다. 이 도구는 모든 브라우저에서 그라디언트가 작동하는 데 필요한 모든 코드를 생성합니다.
최종 단어
오늘 우리는 그라디언트 생성에 대해 많이 논의했고, 구문의 각 부분을 살펴보고 투명한 효과를 만들고 브라우저 호환성을 유지했습니다. 따라서이 시점에서 이미 주제에 대해 더 잘 이해하시기 바랍니다..
우리가 탐험 할 많은 것들이 아직도 있습니다. CSS3 그라디언트 앞으로의 글에서 Hongkiat.com에 계속 주목하십시오. 마지막으로이 게시물을 읽어 주셔서 감사합니다. 즐겁게 보내 주시기 바랍니다..
더 읽을 거리
- 총알 증명 크로스 브라우저 RGBA 배경 - 레아 베루
- CSS3 이미지 - W3.org
- 언제 CSS3 그라디언트를 사용할 수 있습니까 - CanIUse.com
