텍스트 외곽선 색상 지정 문의 채택완료
하늘그루터기
1년 전
조회 4,021
</p>
<p>.text {
font-weight: 900; </p>
<p> 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 */
}</p>
<p>
이런형태로 글자에 그라데이션으로 배경색을 넣었습니다.
테두리에 하얀선으로 마무리를 하고 싶은데요.
text-shadow: 일반적인 방식으로는 안되네요.
테두리가 아니라 글자색이 통으로 적용돼요.
글자 테두리만 하얗게 지정하는 방법 문의드려요.
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><style>
body { background-color: #000; }</p>
<p> </p>
<p>.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 */
}</p>
<p> </p>
<p>.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))
;
}</p>
<p>
.txt-size-m {
font-size: 2em;
}
.txt-size-l {
font-size: 5em;
}
.txt-size-xl {
font-size: 10em;
}
</style></p>
<p> </p>
<p><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></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
하늘그루터기
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 3개
�
하늘그루터기
1년 전
소스 자체로는 돼요.
그런데 제가 적용한 그라데이션 컬러(background: linear-gradient) 소스에는.. 안되네요 ㅠㅠ
그런데 제가 적용한 그라데이션 컬러(background: linear-gradient) 소스에는.. 안되네요 ㅠㅠ
�
웅프
1년 전
-webkit-text-stroke: 1px red; //2px조절을해보세요
�
하늘그루터기
1년 전
빨간테두리선이 굵어지고 테두리 선 안쪽은 그라데이션 컬러가 적용이 안돼요ㅜㅜ
포기해야 하나봐요..
포기해야 하나봐요..
댓글을 작성하려면 로그인이 필요합니다.
1년 전
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;
이여서넣어보세요 한미디로 배경색이 블랙이면 효과를 블랙으로 주시면됩니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
하늘그루터기
1년 전
정성껏 답변 달아주셨는데, 테두리만 적용은 안되네요ㅠㅠ
�
웅프
1년 전
않된다구요? 돼 요 다시해보세요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
포기했는데... 잘 돼요.. 감사합니다ㅠㅠ