CSS 縁取り文字を作る デザインサンプル
文字自体に色は付けず、縁だけを色で塗る「縁取り文字」のCSSデザインサンプルです。
1. text-shadowで作る
See the Pen
css – outlin text by kura (@kuranopen)
on CodePen.
文字の影を作るCSSプロパティtext-shadowを使用した縁取り文字です。
複数指定できる,で区切りを使って縁を作っています。
#000を変えることで別の色変更できます。
- IE10、IE11対応
2. text-strokeで作る
See the Pen
css – outlin text by kura (@kuranopen)
on CodePen.
縁取りできるCSSプロパティtext-strokeを使用した縁取り文字です。
1pxで縁の太さ、#FFFで縁の色を変更できます。
- 文字色の透過可
- IE非対応
