CSS3 border 테두리 속성에 그라디언트 그라데이션 (gradient) 적용시키기
지난 시간에 이어서 그라디언트 관련 내용입니다. 이전 내용에서는 div의 내부에 그라데이션 효과를 만들었다면, 오늘은 div의 border 속성인 테두리에 그라데이션을 적용하는 방법입니다. 방법은 지난시간에 했던것과 큰 차이는 없습니다. 그럼 바로 알아보도록 하겠습니다.
See the Pen CSS3 : border gradient by rgy0409 (@rgy0409) on CodePen.
위의 예제를 살펴보세요. HTML과 CSS 부분의 코딩 상태도 보실 수 있습니다. 중요한 부분은 CSS 이므로 아래에 한번 더 마크업 해두도록 하겠습니다.
div {
float: left;
width: 100px;
height: 100px;
margin: 10px;
font-size: 30px;
line-height: 100px;
text-align: center;
/*border element*/
border: 20px;
border-style: solid;
border-image-slice: 1;
}
.div1 {
border-image: linear-gradient(to bottom, #f00, #00f);
}
.div2 {
border-image: linear-gradient(to right, #f00, #00f);
}
.div3 {
border-image: linear-gradient(to right bottom, #f00, #00f);
}
.div4 {
border-image: linear-gradient(to bottom, #f00 10%, #00f 40%, #0f0 80%, #ff0 100%);
}
.div5 {
border-image: radial-gradient(ellipse at 0% 0%, #f00, #00f);
}
.div6 {
border-image: radial-gradient(ellipse at 0% 100%, #f00, #00f);
}
.div7 {
border-image: radial-gradient(ellipse at 100% 0%, #f00, #00f);
}
.div8 {
border-image: radial-gradient(ellipse at 100% 100%, #f00, #00f);
}
.div9 {
border-image: radial-gradient(ellipse at 50% 50%, #00086c 70%, #fffa74 80%, #00f 95%);
}
.div10 {
border-image: linear-gradient(to right, #555 0%, rgba(0, 0, 255, 0) 100%);
}
이렇게 되어 있습니다. 보시면 linear 형태의 그라데이션, radial 형태의 그라데이션이 모두 적용 가능하다는걸 확인하실 수 있습니다. 또한 linear-gradient의 경우는 방향을 완전히 오른쪽, 왼쪽, 위쪽, 아래쪽으로 정할 수 있을 뿐 아니라, 방향을 하나 더 넣어서 대각선으로도 표현이 가능합니다. radial-gradient의 경우는 중심점의 위치를 %로 정합니다. ellipse at 다음, 0% 0%의 의미는 왼쪽 상단이며, 오른쪽 하단은 100% 100% 입니다. 즉 처음 100%는 가로 방향에 대한 위치, 두번째의 100%는 세로 방향에 대한 위치 입니다.
이 방법은 익스플로러 10 버전 및 하위 버전에서는 동작하지 않습니다. 기타 브라우저에서도 구버전인 경우 적용이 되지 않을 수 있습니다.
공통 부분에 보시면 반드시 들어가야 할 속성이 있습니다. border의 두께, border의 스타일, 그리고 border-image-slice 입니다. border-image-slice 는 테두리를 이미지 파일로 적용시킬 때 사용하게 되는건데 이미지의 영역을 나누는 기능을 합니다. 예제에서는 이미지가 아닌 기존 속성을 그대로 사용하였기 때문에 속성값을 1로 지정해 두었습니다. 그냥 기존 속성을 이용하신다고 하면 이렇게 적용시키면 되는 것이구나 하고 공식처럼 외워두시면 좋습니다.
div9의 경우는 제 예상하고는 다르게 그라데이션이 적용 되었습니다. 여기는 border-image-slice의 값이 얼마냐에 따라서 다르게 나타납니다. 값은 %로 적용시키면 됩니다. div9의 속성에 border-image-slice: 10% !important; 를 넣어보세요. 그리고 수치를 바꿔가면서 테스트해보시면 대충 아실 수 있습니다. 이 방법들을 응용해서 멋진 그라디언트 테두리를 만들어 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
