CSS에서 다중 스트로크 텍스트 효과

Source: Hacker News

위에 제공된 소스 링크만 그대로 두고, 번역하고자 하는 본문 텍스트를 알려주시면 해당 내용을 한국어로 번역해 드리겠습니다. 코드 블록이나 URL은 번역하지 않고 그대로 유지합니다.

소개

레트로 멀티‑스트로크 텍스트 효과를 자주 보았고 CSS text-stroke 속성을 사용해 재현해 보려 했지만 결과가 전혀 맞지 않았습니다. text-stroke가 단일 값만 받기 때문에 요소를 겹쳐 쌓는 것이 생각할 수 있는 유일한 해결책이었지만, 그것도 제대로 작동하지 않는 듯했습니다.

작년 말 어느 저녁, 책 Graphic Japan : from woodblock and zen to manga and kawaii 에서 다시 그 텍스트 효과를 보고 또 한 번 도전하고 싶어졌습니다.

여러 요소를 계속 겹쳐 쌓으면서 각 레이어마다 text-stroke-width 값을 우연히 다르게 지정했습니다. 놀랍게도 이번에는 결과가 점점 더 가까워졌습니다.

--c: #cc0d55;
--n: @i(-1);

@grid: 36x1 / 240px;
@content: '✱';

position: absolute;
inset: 0;
font: 100px/0 sans-serif;
color: var(--c);
z-index: @I(-@i);

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));

작동 원리

text-stroke-width 값이 달라지면 브라우저가 자동으로 문자에 외곽선을 그립니다. 스트로크 폭이 클수록 외곽선이 두꺼워지지만 원래 형태는 그대로 유지됩니다.

@grid: 7x1/ 360px auto noclip;
@content: '✱';
font: 50px/0 sans-serif;
color: transparent;
-webkit-text-stroke-color: #cc0d55;
-webkit-text-stroke-width: @i(*1.8px);

다음 단계는 서로 다른 색상을 사용해 순서대로 배치하는 것입니다.

@grid: 12x1/ 100px ß #f4e1e8;
@content: '✱';
position: absolute;
inset: 0;
z-index: @I(-@i);
font: 50px/0 sans-serif;
color: transparent;
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

흥미로운 부분은 브라우저마다 문자 형태를 외곽선 처리하는 방식이 다르다는 점입니다. Firefox가 Chrome 및 Safari보다 더 부드러운 렌더링을 제공합니다.

또 다른 흥미로운 관찰: 여러 문자를 인라인으로 배치하면 그 형태가 서로 합쳐집니다.

/* ... */
@content: '秋收冬藏';

다양한 폰트 시도하기

최종 결과는 선택한 폰트에 크게 좌우됩니다. 폰트를 더 빠르게 실험해 보기 위해 @google-font 함수를 추가해 폰트 로딩 속도를 높였습니다.

--c: #cc0d55,#fff;
@grid: 34x1 / 320px;
@content: 'b';
font: 150px/0 @google-font(Matemasie);
@place: center;
z-index: @I(-@i);
color: @pn(--c);
-webkit-text-stroke-color: @pn(--c);
-webkit-text-stroke-width: @i(-1, ease, *12px);

font-family: @google-font(Matemasie);
@content: 'b';

--c: #cc0d55,#fff;
@grid: 30x1 / 320px;
:after {
   content: 'Love';
   position: absolute;
}
font: 80px/0 @google-font("Pacifico");
@place: center;
z-index: @I(-@i);
color: @pn(--c);
-webkit-text-stroke-color: @pn(--c);
-webkit-text-stroke-width: @i(ease, -1, *15px);

font-family: @google-font(Pacifico);
@content: 'Love';

font-family: @google-font(Tangerine);
@content: 'Love';

--c: #fff9e0,#f1c550,#ff6600,#ce2525;
--c: #cc0d55,#fff;
@grid: 30x1 / 320px +2 ~0 -10%;
:after {
   content: '+';
   position: absolute;
}
@place: 50% 50%;
font: 120px/0 @google-font("Cherry Bomb One");
z-index: @I(-@i);
color: @pn(--c);
-webkit-text-stroke-color: @pn(--c);
-webkit-text-stroke-width: @i(ease, -1, *12px);

font-family: @google-font('Cherry Bomb One');
@content: '+';

불행히도 성능은 CSS 필터만큼이나 좋지 않으며, 특히 폰트 크기가 커질수록 깜박임이 발생할 수 있습니다. css-doodle로 이미지를 생성하거나 실험용으로는 괜찮지만, 실제 프로덕션 환경에서는 적합하지 않습니다.

More examples

Here are two more examples to play around with different colors and characters, generated with css-doodle, just for fun.

CodePen link for the first one: