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: 일반적인 방식으로는 안되네요.
테두리가 아니라 글자색이 통으로 적용돼요.
글자 테두리만 하얗게 지정하는 방법 문의드려요.
|
답변 3개 / 댓글 6개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
Copy
<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>답변에 대한 댓글 1개
하늘그루터기
1년 전
1년 전
답변에 대한 댓글 3개
하늘그루터기
1년 전
소스 자체로는 돼요.
그런데 제가 적용한 그라데이션 컬러(background: linear-gradient) 소스에는.. 안되네요 ㅠㅠ
그런데 제가 적용한 그라데이션 컬러(background: linear-gradient) 소스에는.. 안되네요 ㅠㅠ
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개
답변을 작성하려면 로그인이 필요합니다.
포기했는데... 잘 돼요.. 감사합니다ㅠㅠ