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

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

QA

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

본문


.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: 일반적인 방식으로는 안되네요.

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

 

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

이 질문에 댓글 쓰기 :

답변 3

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

 


<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>
    font-size:20px;
    -webkit-text-stroke: 1px red;  //테두리 색
    text-stroke: 1px white;
    /* 글자 테두리 효과 */
    text-shadow:
        2px 2px 0px white,
        -2px 2px 0px white,
        2px -2px 0px white,
        -2px -2px 0px white,
        2px 0px 0px white,
        -2px 0px 0px white,
        0px 2px 0px white,
        0px -2px 0px white;
 
이여서넣어보세요 한미디로 배경색이 블랙이면 효과를 블랙으로 주시면됩니다.

1914633862_1725712265.8497.png

답변을 작성하시기 전에 로그인 해주세요.
전체 61,083
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT