GoKawiilI used to see that retro multi-stroke text effect quite often and tried to replicate it using the CSS text-stroke property, but the results never quite matched. Because text-stroke accepts a single value, stacking elements was the only workaround I could think of, though it didn't seem to work.
One evening late last year, I was eager to give it another shot after seeing the text effect again in the book Graphic Japan : from woodblock and zen to manga and kawaii.
Text stroke effect from the book
I kept stacking several elements and accidentally varied the text-stroke-width for each layer. To my suprise, the result was getting closer this time.
--c : #cc0d55 ; --n : @i ( -1 ); @grid : 36 x1 / 240px ; @content : '✱' ; position : absolute ; inset : 0 ; font : 100 px / 0 sans-serif ; color : var ( --c ); z-index : @I ( - @ i ); -webkit-text-stroke-color : @pn ( --c , #f4e1e8 ); -webkit-text-stroke-width : $ em (. 08 n +. 02 ( 1 - ( -1 )^ n ));
How it works
For different values of the text-stroke-width , browsers will automatically draw outlines of the charater, The larger you set the stroke width, the thicker the outline will get, while still maintain its original shape.
@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);
The next step is to use different colors and put them in order.
@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);
... continue reading