input border gradation with SVG
input
이hover
와focus
되었을 때border gradient
가 나오도록 할 것.- 반드시
border-radius
가 포함되어야 함. input
의background-color
는 무조건opacity
값이 들어가야 함.
.border-image .input-box input:hover {
border: 1px solid transparent;
border-image: linear-gradient(to right, #000046 0%, #1cb5e0 100%);
border-image-slice: 1;
}
border-image
border-image-slice
속성을 이용해서 그라데이션을 넣을 수가 있지만border-radius
를 넣을 수가 없음...border-image
속성과border-radius
속성이 호환되지 않기 때문이라고 함.
.bg-image .input-box input:hover {
border: 1px solid transparent;
background-image: linear-gradient(#fff, #fff),
linear-gradient(to right, #000046 0%, #1cb5e0 100%);
background-origin: border-box;
background-clip: content-box, border-box;
}
background
를 이용해서border-radius
를 넣는 방법.border
의 색을 투명하게 하고,background
에background: linear-gradient(컨텐츠 색상)
과linear-gradient(보더 색상);
를 설정해주면 됨.border-radius
는 적용되지만...
padding
값을 넣을 수가 없고,background
에opacity
를 줄 수 없음.
- 그래서 생각해본 게
SVG
. SVG
는 내가 원하는대로 그릴 수 있기 때문에SVG
로border-radius
가 포함된 선을 그리기opacity
로 가리고hover
했을 때에만opacity
값을1
로 변경
.gradient .input-box svg {
cursor: text;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.gradient .input-box svg rect {
width: calc(100% - 2px);
height: calc(100% - 2px);
}
.gradient .input-box label:hover svg {
opacity: 1;
}
.gradient .input-box input:focus + label svg {
opacity: 1;
}
.gradient .input-box input:focus {
background-color: rgba(255, 255, 255, 0);
outline: none;
border: 0;
}
.gradient .input-box input:focus::placeholder {
color: #fff;
}
- 코드가 길어짐...
input
이 들어가는 곳마다SVG
를 넣어줘야만 하는 번거로움...