텍스트 외곽선 색상 지정 문의 채택완료

하늘그루터기

1년 전 조회 4,392

Copy



.text {

   font-weight: 900;    

    background: linear-gradient(45deg, #ff6f61, #de64a6, #6a1b9a); /* 3가지 색상 그라데이션 */

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent; /* For non-WebKit browsers */

}

이런형태로 글자에 그라데이션으로 배경색을 넣었습니다.

테두리에 하얀선으로 마무리를 하고 싶은데요.

text-shadow: 일반적인 방식으로는 안되네요.

테두리가 아니라 글자색이 통으로 적용돼요.

글자 테두리만 하얗게 지정하는 방법 문의드려요.

#그누보드5

답변 3개

정렬:

채택된 답변

+20 포인트

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

다음 코드가 도움이 될지 모르겠습니다.

Copy





body { background-color: #000; }

 

.text {

   font-weight: 900;    

    background: linear-gradient(45deg, #ff6f61, #de64a6, #6a1b9a); /* 3가지 색상 그라데이션 */

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent; /* For non-WebKit browsers */

}

 

.txt-stroke {

   --stroke-thickness: 0.01em;

   --stroke-color: #fff;

   filter: 

      drop-shadow(0 calc(-1 * var(--stroke-thickness)) 0 var(--stroke-color))

      drop-shadow(var(--stroke-thickness) 0 0 var(--stroke-color))

      drop-shadow(0 var(--stroke-thickness) 0 var(--stroke-color))

      drop-shadow(calc(-1 * var(--stroke-thickness)) 0 0 var(--stroke-color))

   ;

}



.txt-size-m {

   font-size: 2em;

}

.txt-size-l {

   font-size: 5em;

}

.txt-size-xl {

   font-size: 10em;

}



 

asdf

asdf

asdf

asdf

asdf

로그인 후 평가할 수 있습니다