CSSを使用してテキストに輪郭、ストローク効果を与える方法を見てみます。
輪郭はテキストを強調する効果的な方法です。CSSを使用して簡単に使用することができますが、最も簡単な方法は次のように-webkit-text-strokeを使用する方法です。
-webkit-text-stroke: 1px #000
ただし、この方法は非常に便利ですが、標準的な方法ではなく、ウェブキットおよびモジラ系のブラウザでのみ適用されます。使用する場合は、次のようにCSSに適用してください。
.text-stroke {
-webkit-text-stroke: 1px #000;
}
-webkit-text-stroke: 1px #000;
}
これでテキストに輪郭が鮮明に表示されます。
それでは、別の方法を見てみましょう。
# -webkit-text-stroke クロスブラウジング方法
以下のような方法を使用すると、テキストの影響を利用して、同様の効果を得ることができます。以下のコードをご覧ください。
.text-stroke {
color: #f00;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
color: #f00;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
この方法は、text-shadowが適用されるほとんどのブラウザで実装されます。非常に効果的な方法です。
# 実際の輪郭が適用された例を見る
もしも、以下のようなHTMLに上記のCSSを適用して輪郭を直接実装してみましょう。
<span class="text-stroke">THEVOS</span>
上記のコードの実行結果は以下のようになります。
THEVOS
CSS オブジェクトフィットプロパティ
Facebook [ja]コメント