CSS3 원형 및 타원형 그라디언트 [CSS3 팁]
오늘 우리는 계속 토론 할 것입니다. CSS3 그라디언트. 이전 글에서는 생성 방법을 설명했습니다. 선형 그라디언트. 이번에는 상대방을 다룰 것입니다., 원형 및 타원형 그라디언트.
그라디언트 구문
CSS3의 그래디언트는 배경 이미지 재산. 호환성을 높이기 위해서입니다. 배경색 하나의 규칙 세트에서 서로 충돌하지 않도록합니다. 그런 다음, 방사형 그래디언트를 만들기 위해 우리는 이것을 단순히 방사형 그라디언트 () 기능. 그래디언트를 올바르게 설정하는 함수에는 네 가지 값이 포함됩니다.
첫 번째 값은 기울기 위치. 상단, 하단, 중앙 및 왼쪽과 같은 설명 키워드를 사용할 수도 있고, 또는 더 구체적 일 수도 있습니다., 50 % 50 % 중앙에 그라디언트를 설정하거나 0 % 0 % 그라디언트를에서 시작하도록 설정 왼쪽 상단.
두 번째 값은 모양 및 그래디언트 크기, 그라데이션을 형성하는 데는 두 가지 인수가 있습니다. 타원 이는 기본값이며 두 번째는 원.
그리고 그래디언트 크기, 우리는 다음의 여섯 가지 인자 중 하나를 선택할 수있다..
| 가치 | 기술 |
|---|---|
가장 가까운 쪽 | 그라데이션의 모양은 가운데에 가장 가까운 상자의 측면 (원) 또는 가장 가까운 중심에있는 세로 및 가로 양쪽을 충족합니다 (타원의 경우). |
가장 가까운 코너 | 그라디언트의 모양은 상자 중심에서 가장 가까운 모서리를 정확히 충족하도록 크기가 조정됩니다.. |
가장 먼 쪽 | closest-side와 유사하지만, 모양이 중심 (또는 수직 및 수평 측면)에서 가장 멀리 떨어진 상자의 측면을 만나는 크기로되어 있다는 점을 제외하고는,. |
가장 먼 구석 | 그라디언트의 모양이 크기 때문에 상자 중심에서 가장 멀리 떨어진 모서리를 정확히 나타냅니다.. |
있다 | 동의어 |
덮개 | 동의어 |
표 출처 : Mozilla 개발자 네트워크.
마지막으로 세 번째와 네 번째는 색상 조합. 여기에 구문을 작성하여 타원형의 그라디언트를 사용하고 이번에는 덮개 그라디언트 크기의 경우 컨테이너를 덮을 때 널리 퍼집니다.
몸체 배경 이미지 : 방사형 그라데이션 (중심 중심, 타원형 커버, #ffeda3, # ffc800);
생성하기 회보 그라디언트를 사용하면 간단히 이렇게 할 수 있습니다.
몸체 배경 이미지 : 방사형 그라디언트 (가운데 중심, 원형 커버, #ffeda3, # ffc800);
이름에서 알 수 있듯이 그라디언트 모양은 원이됩니다..
브라우저 지원
하지만 모든 브라우저가이 기능을 완벽하게 지원하는 과정에 있으므로 벤더 프리픽스가 필요합니다. 따라서 모든 최신 브라우저에서 작동 할 완벽한 전체 구문 - IE10 이상, Firefox 3.6 이상, Chrome 4.0 이상, Safari 4.0 이상 및 Opera 11+ - 이런 식으로 보일거야.
몸체 배경 이미지 : 방사형 그라디언트 (중앙 하단, 타원형 커버, #ffeda3, # ffc800); 배경 이미지 : -o-radial-gradient (중앙 하단, 타원 표지, #ffeda3, # ffc800); 배경 이미지 : -ms-radial-gradient (중앙 하단, 타원 표지, #ffeda3, # ffc800); 배경 이미지 : -moz-radial-gradient (중앙 하단, 타원 표지, #ffeda3, # ffc800); background-image : -webkit-radial-gradient (중앙 하단, 타원 표지, #ffeda3, # ffc800);
그라디언트로 놀기 위해 데모를 보거나 소스를 다운로드하십시오..
- 데모
- 소스 다운로드
최종 단어
CSS3 방사형 그래디언트를 만드는 것은 생각만큼 힘들지 않으며, 특히 코드 생성을위한 이러한 도구의 도움을받는 경우 :
- Colorzilla Gradients
- 그라디언트
방사형 그래디언트는 CSS3 gadients의 한 유형일 뿐이므로 향후 게시물에서 주제에 대한 논의를 계속할 것이므로 Hongkiat.com에 계속 지켜봐주십시오.
