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-imageborder-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를 넣어줘야만 하는 번거로움...