CSS3 반복 그라디언트 [CSS3 팁]
웹 사이트를 장식하는 방식을 변경하는 CSS3 기능이 많이 있습니다. 그 중 하나는 CSS3 그라디언트입니다. CSS3 이전에는 그래디언트 효과를 만들기 위해 반드시 이미지가 필요했습니다. 이제는 CSS 만 사용하여 동일한 효과 (더 나은 효과)를 전달할 수 있습니다.
이전 글에서 우리는 CSS3으로 달성 할 수있는 두 가지 유형의 그라디언트에 대해 논의했습니다.
- 방사형 및
- 선형 그라디언트.
이번에는 형제를 살펴 보겠습니다. 반복 그라디언트.
기본 반복
반복 그라디언트 기본적으로 확장 기능입니다. 구문은 방사형 및 선형 그라데이션을 정의하는 것과 유사하며 이름에서 알 수 있듯이 지정된 방향으로 색상을 반복합니다. 선형 그래디언트를 반복하려면이 함수를 사용할 수 있습니다. 반복 선형 그라디언트, 방사형 또는 타원형 그라데이션을 반복하는 동안이 함수를 사용합니다. 반복 방사형 그라디언트.
/ * Linear * / .gradient background : 반복 선형 그라데이션 (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background : 반복 방사형 그라디언트 (50 % 50 %, 원, # f9f9f9, #cccccc 20px);
코드에서 나머지는별로 다르지 않습니다. 반복되는 색. 다음은이 색상 반복이 어떻게 작동 하는지를 설명하기위한 간단한 그림입니다..
위의 이미지는 반복되는 선형 그래디언트에 대해서만 설명하지만 기본 아이디어는 색상이 무한히 반복되는 방사형 그래디언트에도 적용됩니다.이 경우 모든 방향으로 반복됩니다. 데모를 보려면 아래 링크를 클릭하십시오..
- 데모보기
다음 섹션에서는 실제 예제에서 CSS3 반복 그라디언트를 사용하는 방법을 보여줍니다..
예 : 패턴 만들기
가장 일반적인 구현 반복 그라디언트 배경 패턴을 만드는 것입니다. 이 예제에서는 간단한 수직 스트라이프 패턴을 만들 것입니다..
.그래디언트 배경 : 반복 선형 그라데이션 (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
두 가지 색상을 정의하는 방법에 유의하십시오. - # f9f9f9 과 #cccccc - 같은 지점에서, 20px. 이 예제는이 두 색상의 차이를 선명하게하여 희미함을 제거합니다..
방향을 지시하기 위해 우리는 단순히 각도를 변경합니다. - 90도 동안 수평으로 지시합니다 45도 대각선으로 지시 할 것입니다..
- 데모보기
예 : Paperline 만들기
이 두 번째 예에서는 노트북에서 자주 볼 수있는 종이 라인을 만들 것입니다. 이 효과를 만들려면 div, 이미지 없음, CSS 만.
.그라디언트 너비 : 자동; 높이 : 500px; 여백 : 0 50px; 배경 : -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); 배경 : -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); 배경 : -o 반복 선형 그라데이션 (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); 배경 : 반복 선형 그라데이션 (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background-size : 100 % 21px;
CSS3도 추가되었습니다. 배경 크기 에 대한 배경 이미지의 크기를 지정하는 속성 100 %, 20px. CSS3 그래디언트는 '색상'을 표시하지만 이미지로 실제로 분류됩니다., 색깔이 아니다.
다음으로 :전에 의사 요소 용지의 왼쪽에 줄무늬를 추가하려면.
.그라디언트 : before content : ""; 디스플레이 : 인라인 블록; 높이 : 500px; 너비 : 4px; border-left : 4px 배수 # FCA1A1; 위치 : 상대적; 왼쪽 : 30px;
그리고 우리는 끝났습니다. 정말 간단합니다. 우리는 이제 아래의 링크를 통해 모든 것을 볼 수 있습니다..
- 데모보기
- 소스 다운로드
추가 리소스
- 웹킷 CSS3 그라디언트
- Microsoft Developer Network의 CSS3 그라디언트
