CSSでtext-stroke-colorとtext-stroke-widthの使い方を覚えると、文字の周りを縁取るテキストの表現ができるようになります。
text-stroke-colorとtext-stroke-widthのCSSプロパティはセットで使用しますが記述方法が簡単なので使い方はすぐに理解できます。
CSSのtext-strokeプロパティ
text-stroke-colorとtext-stroke-widthはCSSのtext-strokeプロパティです。
CSSのtext-stroke-colorプロパティは文字の周りの色を指定することができます。
CSSのtext-stroke-widthプロパティは文字の周りの太さを指定することができます。
ただしtext-stroke-colorもtext-stroke-widthもCSSのtext-strokeプロパティとして現在は標準化されていなくて、ブラウザの対応状況としてはIEがtext-strokeプロパティに対応していません。
CSSのtext-strokeプロパティが標準化するかどうか気になりましたがMDNの-webkit-text-stroke-colorと-webkit-text-stroke-widthのページを確認すると「標準化の予定もありません」の記載があります。またブラウザごとに表示の差もあるようなので、実装前にはブラウザごとの確認をしてから検討するのが無難ですね。
text-stroke-colorの使い方
CSSのtext-strokeプロパティのtext-stroke-colorの使い方ですがベンダープレフィックスを使用して記述します。
-webkit-text-stroke-color: #60fff0;
文字の周りに色を適用したい要素にCSSで-webkit-text-stroke-colorのプロパティを記述して値にカラーコードを指定します。
例えばh2の見出し要素の文字周りに色を適用する場合です。
<h2 class="text-stroke-color">-text-stroke-color-</h2>.text-stroke-color{
background-color: #333;
color: #fff;
width: 100%;
text-align:center;
font-size: 3rem;
-webkit-text-stroke-color: cadetblue;
}
h2にクラス付けしたクラス名をCSSでセレクタにして-webkit-text-stroke-color: cadetblue;のように値に文字の縁取りに適用したいカラーコードを指定します。
-webkit-text-stroke-colorを指定したh2の見出し要素をブラウザで表示確認すると上の画像のようにcolorプロパティの値に記述した色だけが文字に適用されて表示します。
CSSでtext-stroke-colorプロパティは「文字の周りに対しての色を適用」するCSSプロパティなので、今の記述段階ではtext-stroke-colorの値に指定した色は文字に反映しないです。
文字の周りに色を反映させるにはtext-stroke-colorを記述したCSSのセレクタにtext-stroke-widthも記述します。
text-stroke-width使い方
CSSでtext-stroke-widthの使い方はtext-stroke-colorの記述とセットにしてCSSのセレクタに記述します。
.text-stroke-color{
background-color: #333;
color: #fff;
width: 100%;
text-align:center;
font-size: 3rem;
-webkit-text-stroke-color: cadetblue;
-webkit-text-stroke-width: 2px;
}
-webkit-を付けてtext-stroke-widthを記述、値には数値と単位を指定する使い方をします。px単位が無難かもしれません。
CSSのtext-stroke-widthプロパティは文字の周りの太さを指定するためのプロパティなのでtext-stroke-widthの値に指定した数値で文字周りの太さが適用され反映しtext-stroke-colorに指定した色が表示されます。
text-stroke-widthの値に指定する数値にはキーワード値も使用できます。
- thin
- medium
- thick
そしてtext-stroke-widthの値に指定する数値の単位です。
- px
- em
remあたりもブラウザに反映したので使用できそうですがpx単位が使いやすかったです。
ここまではCSSのtext-stroke-colorとtext-stroke-widthの基本的な使い方でした。
CSSで文字の外側だけを表示する
text-stroke-colorとtext-stroke-widthの使い方としては、CSSで文字の外側だけを表示することができます。
次の画像がCSSで文字の外側(アウトライン)だけを表示したテキストです。
CSSで文字の外側だけを表示するにはtext-stroke-colorで文字のアウトラインの色を指定、text-stroke-widthでアウトラインの太さを指定。
そして文字の外側だけを表示するために-webkit-text-fill-colorプロパティを指定します。
.text-out{
background-color: #333;
width: 100%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
font-size: 3rem;
-webkit-text-stroke-color: #60fff0;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: transparent;
}
-webkit-text-fill-colorの値にはtransparentを指定します。
CSSの-webkit-text-fill-colorプロパティはテキストの文字の色を指定できます。値に記述するtransparentは透明にすることができるため文字が透明になり、text-stroke-colorとtext-stroke-widthで文字を縁取った外側だけを表示することができます。
CSSで文字の内側の色をhoverする
text-stroke-colorとtext-stroke-widthで文字の周りを縁取ったテキスト表現をするときに、通常の表示はCSSで文字の外側(縁取り)だけを表示することにしてhover時には文字の内側の色も表示するという使い方もできます。
まずtext-stroke-colorとtext-stroke-widthの指定と共にtext-fill-colorの指定をして文字のアウトラインだけで表示したテキストデザインにしておきます。
.text-in{
background-color: #333;
width: 100%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
font-size: 3rem;
-webkit-text-stroke-color: #60fff0;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: transparent;
}
.text-in:hover{
-webkit-text-fill-color: #9565eb;
}
次にCSSで文字の内側の色をhoverしたときに表示させるために、text-stroke-colorとtext-stroke-widthを記述したセレクタの擬似クラスセレクタを作成。
作成した擬似クラスセレクタに-webkit-text-fill-colorプロパティを記述、値に要素がhoverしたときに適用される文字の内側の色を指定します。
するとhover状態になったときのテキスト表示はtext-stroke-colorとtext-stroke-widthで適用した文字の周りの色と擬似クラス(:hover)のセレクタに記述した-webkit-text-fill-colorの内側の色が適用して表示できます。
CSSのtext-shadowで文字の内側の色をぼかす使い方でも良いかと思います。
.text-in:hover{
text-shadow: 0px 0px 35px #caff8d;;
}
text-shadowの値で縦横のオフセット値は0pxにして影のぼかし具合を35pxにすると上の画像のように、CSSで文字の内側の色がぼやけてhoverすることができます。
まぁtext-strokeとtext-shadowの組み合わせでテキストのアウトラインをデザインするなら、text-shadowだけでテキストデザインしたほうがIEにも対応できるのかと思いますが、今回はCSSのtext-stroke-colorとtext-stroke-widthの使い方でしたのでご参考までに。
