텍스트 외곽선 색상 지정 문의
본문
.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;
이여서넣어보세요 한미디로 배경색이 블랙이면 효과를 블랙으로 주시면됩니다.
정성껏 답변 달아주셨는데, 테두리만 적용은 안되네요ㅠㅠ
않된다구요? 돼 요 다시해보세요
소스 자체로는 돼요.
그런데 제가 적용한 그라데이션 컬러(background: linear-gradient) 소스에는.. 안되네요 ㅠㅠ
-webkit-text-stroke: 1px red; //2px조절을해보세요
빨간테두리선이 굵어지고 테두리 선 안쪽은 그라데이션 컬러가 적용이 안돼요ㅜㅜ
포기해야 하나봐요..
답변을 작성하시기 전에 로그인 해주세요.
