Result
白抜きと通常のテキストを用意して少しずらし、ブレンドモードで良テキストが重なった部分のカラーを表示する、みたいなの
簡単に書けるコードでちょっと目を惹くテキストに装飾できますね。管理もしやすいです
css
.main {/*通常テキストのスタイル*/ fill: #da4167; font-size:13px; font-weight:bold; text-transform: lowercase;}.overline {/*白抜きテキストのスタイル*/ text-transform: lowercase; stroke: #01b9e1; font-weight:bold; font-size:13px; stroke-width: 0.5px; fill: transparent; mix-blend-mode: darken;} |
html
<svg viewBox="0 1 160 15" xmlns="http://www.w3.org/2000/svg"> <text x="1" y="13" class=main><!--x軸を少しずらしてます--> foo </text> <text x="0" y="13" class=overline> foo </text></svg> |
