border_gradation

input border gradation with SVG

Goal

• input이 hover와 focus되었을 때 border gradient가 나오도록 할 것.
• 반드시 border-radius가 포함되어야 함.
• input의 background-color는 무조건 opacity값이 들어가야 함.

시도

border-image

.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 속성이 호환되지 않기 때문이라고 함.

---

background-origin, background-clip

.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;
}

실행 결과

문제점

1. 코드가 길어짐...
2. input이 들어가는 곳마다 SVG를 넣어줘야만 하는 번거로움...