CSS 속성 linear-gradient와 border-image-slice 를 이용해서 테두리(border)에 그라데이션 효과를 주는 방법입니다.
border-image-slice
border-image-slice는 CSS 속성 중 하나로, 배경 이미지를 사용하여 요소의 테두리를 꾸밀 때 이미지를 어떻게 잘라낼지를 지정합니다. 이 속성은 border-image-source, border-image-width, border-image-outset와 함께 사용되어 테두리 이미지를 제어하는 데에 기여합니다.
border-image-slice의 기본값은 100%입니다.
이 값은 이미지를 가로 및 세로로 100%만큼 사용하도록 설정하는데, 이는 이미지의 전체 부분을 사용한다는 것을 의미합니다.
다음은 border-image-slice의 사용 예시입니다.
.element {
border-image-source: url('border.png'); /* 테두리 이미지의 소스를 설정합니다. */
border-image-slice: 20%; /* 이미지를 어떻게 잘라낼지를 설정합니다. */
border-image-width: 30px; /* 테두리 이미지의 두께를 설정합니다. */
border-image-outset: 10px; /* 테두리 이미지의 외부 여백을 설정합니다. */
border-image-repeat: round; /* 이미지의 반복 방식을 설정합니다. */
}
linear-gradient
linear-gradient는 CSS에서 그라데이션(gradient)을 생성하는 함수 중 하나입니다. 이 함수는 선형 그라데이션을 만들어주며, 요소의 배경이나 다른 속성에 적용하여 색상이 서서히 변화하는 효과를 만들 수 있습니다.
linear-gradient 함수의 기본 구문은 다음과 같습니다.
linear-gradient([direction], color-stop1, color-stop2, ...);
direction: 그라데이션이 진행하는 방향을 나타냅니다. 예를 들어, "to right", "to bottom", "45deg"와 같은 값을 사용할 수 있습니다. 생략하면 기본값인 "to bottom"이 적용됩니다.
color-stop: 그라데이션의 색상 점을 나타냅니다. 이는 색상값이며, 위치를 나타내는 비율값도 함께 사용됩니다. 예를 들어, "red", "50% red", "white 20%, black 80%"와 같은 형식이 가능합니다.
예를 들어, 수평 방향으로 진행하는 간단한 그라데이션은 다음과 같이 표현할 수 있습니다.
background: linear-gradient(to right, red, yellow);
이 예제는 빨간색에서 시작해서 오른쪽으로 진행하면서 노란색으로 종료되는 수평 그라데이션을 생성합니다.
그라데이션에는 다양한 옵션과 설정이 있으며, 이를 통해 더 복잡하고 다양한 효과를 만들 수 있습니다.
그라디언트 만들기가 어려울경우 아래 사이트에서 손쉽게 만들 수 있습니다.
그라디언트 예제 사이트
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
테두리 효과 예제 코드
See the Pen Untitled by webmini (@webmini) on CodePen.
border-color 대신 border-image 로 테두리의 스타일을 만들어 줍니다.
테두리를 둥글게 만들려면 border-radius 를 추가해줍니다.
