ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

CSSだけでテキストを縁取りする方法トリッキーすぎた!

今回は、お仕事でテキストを縁取りする事態が発生したので、こちらを紹介していきます!!text-shadowを限界まで(?)使った実に厄介なものになっているので限界までわかりやすく説明しました(笑)

 

text-shadow基本

「text-shadow」はテキストに影を付けるプロパティになります。

 

See the Pen text-shadow by カノト (@kanoto) on CodePen.

 

値の内容は「横にXピクセル 縦にYピクセル ぼかしNピクセル 影の色」の順になります。

さて、これの値が複数の場合はどうなるでしょうか?

やってみましょう!!(わかりやすいように影をめちゃずらしました)

 

See the Pen text-shadow複数 by カノト (@kanoto) on CodePen.

 

おわかりいただけただろうか・・・。

値を指定した個数だけ影が増えるのですね!!

この特性を使って、縁取りを作っていきます!

 テキストに縁取りを付けてみよう!

考え方としては、ぼかし無しのシャドウをテキストの周り(上下左右)に配置すればOKという感じです!

それでは実際にやってみよう!

 

See the Pen 縁取りpart1 by カノト (@kanoto) on CodePen.

 

おぉ!いい感じ!!

と思いきや、ちょっとビミョーに切れてる・・・。

 

応用編以降は続きを見るからぜひご覧ください!!

 

続きはこちらから!