TIL - border bottom 그라데이션 구현하기

오늘 input 요소의  border-bottom에 그라데이션을 적용하는 과정에서 여러 방법을 시도하고 학습했습니다.

 

1. border-image 속성 사용 (첫 번째 시도): - 시도한 코드:

'border-image': 'linear-gradient(to right, #12F287 0%, rgba(18, 242, 135, 1) 50%, #12F287 100%)

1 - 문제점: 시작과 끝 부분이 rgba가 아니어서 그라데이션 효과가 제대로 나타나지 않았음

2. Tailwind plugin을 사용한 방법 (두 번째 시도): - tailwind.config.js에 다음과 같은 plugin 추가:

     plugin(function ({ addUtilities }) {
       const newUtilities = {
         '.border-gradient': {
           position: 'relative',
           '::after': {
             content: '""',
             position: 'absolute',
             left: '0',
             right: '0',
             bottom: '0',
             height: '2px',
             background: 'linear-gradient(to right, rgba(18, 242, 135, 0.1), rgba(18, 242, 135, 0.3), rgba(18, 242, 135, 0.1))',
           },
         },
       };
       addUtilities(newUtilities);
     }),

- 문제점: 부모 요소의 position 설정과 관련하여 예상대로 작동하지 않음

3. Stack Overflow에서 제안받은 방법:

<div class="relative w-64 bg-sky-50 before:absolute
 before:inset-x-0 before:bottom-0 before:h-1 before:bg-gradient-to-r 
before:from-transparent before:via-green-500 before:to-transparent">

이 방법은 pseudo-element를 사용하여 그라데이션을 적용하는 접근법

4. 최종 해결책:

    plugin(function ({ addUtilities }) {
      const newUtilities = {
        '.border-gradient': {
          'border-image':
            'linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(18, 242, 135, 1) 50%, rgba(0, 0, 0, 0.3) 100%) 1',

          'border-image-slice': '1',
          'border-width': '0 0 1px 0',
        },
      };
      addUtilities(newUtilities);
    }),

성공 요인:

1. border-image 속성 사용
2. linear-gradient의 시작과 끝에 rgba로 투명도 적용
3. border-width로 bottom에만 적용되도록 설정

학습 포인트:

1. border-image와 linear-gradient를 조합하여 복잡한 border 스타일을 만들 수 있다는 것을 배웠습니다. border-bottom에만 그라데이션을 적용하는 방법을 알게 되었습니다.
2. rgba 색상 값의 알파 채널을 조절하는 것이 자연스러운 그라데이션 효과를 만드는 데 매우 중요하다는 것을 깨달았습니다. 처음에는 이 부분을 간과했다가 나중에 이를 적용하여 원하는 효과를 얻을 수 있었습니다.
3. pseudo-element를 사용한 스타일링 기법이 복잡한 디자인을 구현하는 데 유용하다는 것을 배웠습니다.
4. 한 가지 문제를 해결하기 위해 여러 가지 접근 방식을 시도해 본 것이 매우 유익했습니다. 이 과정에서 CSS의 다양한 속성들과 그 상호작용에 대해 더 깊이 이해하게 되었고, 문제 해결 능력도 향상되었다고 느꼈습니다.
5. 스택오버플로우 같은 커뮤니티 리소스를 활용하는 것의 중요성을 다시 한번 깨달았습니다. 다른 개발자들의 접근 방식을 참고하면서 새로운 아이디어를 얻고 문제를 다각도로 바라볼 수 있었습니다.