webkit系(Google Chrome、Safariなど)が中心になりますが、CSS3を使って、テキストにPhotoshopなどで加工したような効果を付加できます。このサンプルでは、効果の対象をfont-familyにsans-serifを指定したh1(72px)にしています。
- 1番目は「text-stroke」、「text-fill-color」、「background-clip」を使用しています。
- 2番目は「text-stroke」で、テキストを輪郭表示にしています。「text-stroke」の対応: Google Chrome、Safari、Operaはv15から、iOS Safari、Androidブラウザ(Android3.0以外)。
- 3番目は「text-stroke」の代わりに「text-shadow」を使って、テキストを輪郭表示にしています。webkit系以外にも輪郭表示に対応させることができます。
- 4番目は「text-shadow」と「background-clip」を使っています。
- 5番目は「text-shadow」のみで実現しています。