Home-theater-designers
인터넷에 몇 분 이상 있었다면 CSS 그라디언트를 접했을 가능성이 있습니다. CSS background 속성은 다양한 스타일을 만드는 데 사용할 수 있으며 가장 흥미로운 유형 중 하나는 그래디언트 값으로 수행할 수 있다는 것입니다.
다양한 CSS 그라디언트를 디자인하고 생성하는 방법을 아는 것은 모든 소프트웨어 디자이너 또는 개발자에게 자산입니다. 이 기사에서는 프로젝트에 CSS 그라디언트를 통합하기 시작하기 위해 알아야 할 모든 것을 배울 것입니다.
CSS 그라디언트 란 무엇입니까?
CSS 그라디언트는 본질적으로 한 색상에서 다음 색상으로 부드럽게 전환되는 두 개 이상의 색상 조합입니다. CSS 그라디언트의 전환 상태는 사용된 그라디언트 유형에 따라 다릅니다. 소프트웨어 설계에 일반적으로 사용되는 두 가지 주요 유형의 그라디언트인 선형 및 방사형이 있습니다.
그러나 덜 인기 있고 원추형 그라디언트로 알려진 세 번째 유형의 그라디언트가 있습니다.
CSS 그라디언트 구문
Background-image: gradient-type (direction, color1, color2);
CSS 그래디언트는 background-image CSS 속성에 할당되어야 합니다. 그래디언트 유형은 여러 가지 중 하나일 수 있습니다. 선형 그라디언트, 방사형 그라디언트 또는 원추형 그라디언트. 그라디언트 유형 다음에는 그라디언트의 전환 방향과 그라디언트에 포함될 색상을 포함하는 여는 괄호와 닫는 괄호가 옵니다.
위의 예는 두 가지 색상을 보여주지만 그라디언트는 여러 색상을 포함할 수 있습니다. 유일한 요구 사항은 목록의 각 색상이 쉼표로 구분된다는 것입니다.
선형 그라디언트 란 무엇입니까?
선형 그래디언트는 가장 인기 있는 CSS 그래디언트입니다. 두 개 이상의 색상을 사용하여 가로, 세로 또는 대각선 전환 그라디언트를 만듭니다.
CSS 선형 그라디언트 예제
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
위의 코드는 다음 CSS 그래디언트를 생성합니다.
위의 예에서 생략된 그래디언트 구문의 주요 구성 요소가 하나 있습니다. 이 구성 요소는 그라디언트의 전환 방향이며 선형 그라디언트의 기본 정렬이 수직(위에서 아래)이기 때문에 생략되었습니다. 이것이 이 예에서 원하는 출력입니다.
위의 코드는 다음 코드 줄과 동일한 결과를 생성합니다. 둘 사이의 유일한 차이점은 코드의 방향 섹션입니다.
하단 선형 그라데이션 예제 사용
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
출력에서 볼 수 있듯이 위의 코드는 상단에서 파란색으로 시작하여 하단에서 주황색으로 천천히 전환되는 그라디언트를 생성합니다. 색상 순서를 반대로 하고 싶다면 간단히 교체할 수 있습니다. 바닥으로 ~와 함께 상단으로 그러면 그라디언트의 방향이 바뀌어 다음 출력이 생성됩니다.
수직 정렬과 유사하게 그라디언트의 수평 정렬은 두 가지 방향 키워드 세트를 사용하여 달성할 수 있습니다. 왼쪽으로 그리고 오른쪽으로 , 각각 다음 출력을 생성합니다.
이 액세서리는 지원되지 않을 수 있습니다은 무슨 뜻인가요?
대각선 선형 그라데이션
선형 그라디언트의 모든 방향에서 대각선 선형 그라디언트 전환을 달성하는 것이 가능합니다. 이를 가능하게 하기 위해 알아야 할 키워드의 특정 목록은 4개뿐입니다.
- 오른쪽 하단으로
- 왼쪽 하단으로
- 오른쪽 상단으로
- 왼쪽 상단으로
대각선 선형 그라데이션 예제 사용
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
위의 예는 다음 출력을 생성합니다.
위의 출력에서 볼 수 있듯이 선형 그래디언트는 그래디언트의 왼쪽 상단에서 오른쪽 하단 섹션으로 이동하는 대각선 방향으로 전환됩니다.
여러 가지 빛깔의 선형 그라데이션
선형 그래디언트는 두 개 이상의 색상을 가질 수 있지만 그래디언트에서 더 많은 색상은 어떻게 보이나요? 여러 가지 빛깔의 선형 그라데이션 색상 배열은 방향에 따라 다릅니다. 수평 방향으로 전환하는 것은 선형 그라디언트의 정확한 방향에 따라 선형 그라디언트의 왼쪽 또는 오른쪽에 각각의 새로운 색상이 나타납니다.
여러 가지 빛깔의 선형 그라데이션 예
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
위의 코드 줄은 다음 출력을 생성합니다.
보시다시피 각각의 새로운 색상이 그라디언트의 오른쪽에 추가되어 결국 무지개로 변합니다. 수직 방향에서도 동일한 출력을 얻을 수 있습니다. 그러나 선형 그래디언트의 특정 색상 배열은 수직 방향 키워드(상단 또는 하단)에 따라 달라집니다.
방사형 그라디언트 란 무엇입니까?
방사형 그라디언트는 기본적으로 중심에서 시작하는 더 많은 색상의 나선형 그라디언트를 만듭니다. 선형 그래디언트가 수직 또는 수평으로 흐르는 직선 그래디언트를 생성하는 경우 방사형 그래디언트는 중심에서 외부 가장자리로 흐르는 원형 그래디언트를 생성합니다.
방사형 그라데이션 예제 사용
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
위의 코드 줄은 다음 출력을 생성합니다.
방사형 그라디언트 중심 변경
기본적으로 방사형 그라디언트는 그라디언트의 중심에서 시작합니다. 그러나 몇 가지 키워드를 도입하여 출발지를 변경할 수 있습니다.
야후 메일 최고의 웹 기반 이메일
방사형 그라데이션 시작 위치 변경 예
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
위의 코드 줄은 다음 출력을 생성합니다.
위의 출력에서 볼 수 있듯이 이제 그라디언트가 중앙 대신 오른쪽 상단 모서리에서 시작됩니다. 이 변경은 키워드가 포함되어 있기 때문에 가능합니다. 맨 위 오른쪽 위의 코드에서. 다음 키워드 목록을 사용하여 방사형 그래디언트의 원점을 변경할 수도 있습니다.
- 왼쪽 상단
- 오른쪽 하단
- 왼쪽 하단
여러 가지 빛깔의 방사형 그라디언트
선형 그라디언트와 마찬가지로 방사형 그라디언트는 두 가지 더 많은 색상을 사용할 수 있습니다. 주요 차이점은 선형 그라디언트가 직선의 그라디언트에 추가되는 경우 방사형 그라디언트가 외부 가장자리에 새 색상을 추가한다는 것입니다.
여러 가지 빛깔의 방사형 그라디언트 예제
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
위의 코드 줄은 다음 출력을 생성합니다.
그라디언트 사용자 정의
지금까지 그라디언트의 방향과 중심점을 변경하는 방법을 살펴보았지만 그라디언트를 사용자 지정하는 방법은 보지 못했습니다. 그라디언트를 사용자 정의하는 것은 많은 작업처럼 들릴 수 있지만 CSS 배경 그라디언트를 만드는 기본 사항을 이해하고 나면 다음 단계는 CSS 그라디언트를 더욱 독특하게 만드는 방법을 배우는 것입니다.
안드로이드 폰이 컴퓨터에 연결되지 않음
기본적으로 그라디언트의 색상은 고르게 분포된 공간을 차지하며 각 색상은 다음 색상으로 부드럽게 전환됩니다. 따라서 두 색상이 결합되어 그라디언트를 형성하는 경우 각 색상은 한 색상에서 다른 색상으로 전환되는 동안 사용 가능한 공간의 절반을 차지합니다. 세 가지 색상이 결합되면 각 색상은 사용 가능한 공간의 1/3을 차지합니다.
사용자 정의된 그라디언트를 사용하면 명시적으로 할당하여 그라디언트에서 색상이 차지하는 공간의 양을 정의할 수 있습니다. 색상 정지 위치 .
선형 그라디언트 사용자 정의하기 예 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
위의 코드 줄은 다음 출력을 생성합니다.
위의 출력은 일반적인 위치 대신 그라디언트의 첫 번째 색상의 30% 지점에서 멈추는 선형 그라디언트의 두 번째 색상을 보여줍니다. 두 번째 색상도 그라디언트의 최종 색상이기 때문에 자연스럽게 끝까지 확장됩니다. .
위 코드의 30%를 첫 번째 색상의 끝 부분에 배치하면 상황이 더 명확해집니다.
선형 그라디언트 사용자 정의 예제 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
위의 코드는 다음과 같은 출력을 생성합니다.
위의 출력은 그라디언트의 두 번째 색상의 30% 지점에서 멈추는 그라디언트의 첫 번째 색상을 명확하게 보여줍니다. 위의 예와 함께 이 예는 색상 정지 사용자 정의를 이해하기 쉽게 만드는 데 도움이 될 것입니다.
방사형 그래디언트 사용자 지정은 선형 그래디언트와 동일한 방식으로 수행됩니다. 방사형 그래디언트에서 위와 동일한 결과를 얻기 위해 수행해야 하는 유일한 작업은 그래디언트 유형과 방향을 변경하는 것입니다.
CSS 그라디언트 생성이 그 어느 때보다 쉬워졌습니다.
이 튜토리얼 문서에서는 선형 및 방사형 그래디언트를 식별하고 생성하는 도구를 제공합니다. 여기까지 했다면 그라디언트의 방향과 중심을 변경하는 방법을 배웠습니다. 또한 이제 CSS 그라디언트를 사용자 정의하고 고유한 배경 그라디언트를 만드는 기술이 있습니다.
그러나 새롭고 독특한 그라디언트를 바로 만들고 싶지 않다면 멋진 기존 그라디언트를 만드는 것으로 시작할 수 있습니다.
공유하다 공유하다 트위터 이메일 27가지 세련된 CSS 배경 그라디언트 예제단색은 작년에 그렇습니다. 그라디언트가 들어 있습니다! 그러나 CSS에서 어떻게 생성합니까?
다음 읽기 관련 항목- 프로그램 작성
- 웹 개발
- 웹 디자인
- CSS
Kadeisha Kean은 전체 스택 소프트웨어 개발자이자 기술/기술 작가입니다. 그녀는 가장 복잡한 기술 개념 중 일부를 단순화하는 뚜렷한 능력을 가지고 있습니다. 기술 초보자라면 누구나 쉽게 이해할 수 있는 소재를 생산합니다. 그녀는 글쓰기, 흥미로운 소프트웨어 개발, 세계 여행(다큐멘터리)에 열정적입니다.
카데이샤 킨이 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.