그누보드 QA - 텍스트 외곽선 색상 지정 문의

텍스트 외곽선 색상 지정 문의

하늘그루터기 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.09.07 20:04:45 1223 (182.♡.♡.94)

본문


.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

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-09-08 00:27:53 221.♡.♡.6

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


<style>
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;
}
</style>
 
<div class="text">asdf</div>
<div class="text txt-stroke">asdf</div>
<div class="text txt-stroke txt-size-m">asdf</div>
<div class="text txt-stroke txt-size-l">asdf</div>
<div class="text txt-stroke txt-size-xl">asdf</div>