このjsfiddleでは、同じテキストが2回描画されます。
- 最初は白で、無地のフォントで
- 次に黒で、アウトラインフォントで
LondrinaSolidとLondrinaShadowの2つのフォントは、まったく同じメトリックを持ち、このように一緒に使用されるように設計されています。
テキストの2つのコピーをHTMLに入れずに、CSSを使用してこの効果を実現する方法はありますか?(もちろん、テキストのコピーをCSSに入れたくありません。)
このjsfiddleでは、同じテキストが2回描画されます。
LondrinaSolidとLondrinaShadowの2つのフォントは、まったく同じメトリックを持ち、このように一緒に使用されるように設計されています。
テキストの2つのコピーをHTMLに入れずに、CSSを使用してこの効果を実現する方法はありますか?(もちろん、テキストのコピーをCSSに入れたくありません。)
5text-shadow
秒はほぼ同じです1 :
text-shadow: 0.03em 0.03em 0 black, -1.25px 0 0 black, 1.25px 0 0 black, 0 -1.25px 0 black, 0 1.25px 0 black;
1はい、矛盾していることは承知しています。
:after を使用してみて、 content 属性を使用できます。
h1:after, h1 > span.shadow:after {
content: "Nashville hack day is November 11";
font-size: 700%;
}
html は次のようになります。
<body>
<h1><span class="shadow"></span></h1>
</body>
これは面倒かもしれませんが、少なくともコンテンツを 1 回書くだけで済みます。
jsfiddleを参照してください。
テキスト シャドウを作成しようとしている場合は、W3C: Css: text shadowsを確認してください。
ただし、これらは非準拠の IE<10 とは互換性がありません。