FirefoxでもCSSで縁取り文字を表示する方法

 Firefoxても、CSSのtext-shadowを使って、縁取り文字を表示する方法です。

まずwebkit系(chrome,safari)ならstrokeの記述を書けばOKです。
h1 {
   color: black;
   -webkit-text-fill-color: white;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
  color: white;
}

でも、Firefoxだとうまく表示できない(白い文字が表示されるだけ)ので、text-shadowを使ってこんなふうに書くと…
h1 {
    color: white;
      text-shadow:
       -1px -1px 0 #000,
        1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
}
Firefoxでも表示できる縁取り文字になりました。
さらに、これに影をつけることもできます。
h1 {
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
もちろんコレもFirefoxで表示されます。IEはシラ(ry

ネタ元では、さらにこれをアニメーションさせる例も有りました。
>>Adding Stroke to Web Text | CSS-Tricks

0 件のコメント:

コメントを投稿