とある事情で時計ウィジェットを作っていて
テキストにグラデーションをかけつつ、テキストの縁取りをする必要が出た。
text-shadowで解決できず悩んだが、なんとか解決したので書いておく。
See the Pen
text gradation & Text borders by mafumafuultu (@mafumafuultu)
on CodePen.
結論から言えば text-strokeの使い方で解決した。
疑似要素側のtext-strokeを0
要素側text-strokeを任意の太さにする。
疑似要素側が要素の上に重なるので、
本来であればテキストの内側にも食い込んでくるstrokeを疑似要素側のstrokeのないグラデーションのテキストを使って隠している。
↧