CSSで文字に境界線を付ける の改訂版 | WEB制作者の日々

WEB制作者の日々

HP制作をはじめました。
昨年(2014年)SOHOじんざい市場さんの生徒になり、一から勉強。
現在も勉強中。勉強しながら仕事もこなす奮闘記。

先日紹介しました

「css3で文字に境界線を付ける」


ですが不具合がありましたので改訂版です。


なにが不具合かというとフォントによっては文字の内側に隙間があるので暗く見えてしまうことがあるということが今コーディングしている案件で発覚したんです。




こんな風に影が見えちゃってるんです。

こんな時は縁取りを少しずらしたものを追加して隙間をなくしてみて下さい。

text-shadow: 0 3px 0 #fff, /*縁取り*/
3px 0 0 #fff, /*縁取り*/
0 -3px 0 #fff, /*縁取り*/
-3px 0 0 #fff, /*縁取り*/
-3px -3px 0 #fff,/*縁取り*/
3px -3px 0 #fff, /*縁取り*/
-3px 3px 0 #fff, /*縁取り*/
3px 3px 0px #fff,/*縁取り*/
0 2px 0 #fff, /*追加縁取り*/
    0 0 2px #fff, /*追加縁取り*/
2px 2px 2px rgba(3, 3, 3, 0.5) /*影*/




以上です。