彼らは待つ人には良いことが起こると言います、そしてこれはウェブ上のテキスト装飾に関しては非常に真実であることがわかります。 CSSテキスト装飾モジュールレベル3は、Web上のテキストを装飾するためのいくつかの優れた新しい方法を定義しており、ブラウザーはついにそれらを適切にサポートし始めています。 別のアンダースコアの色を取得するために、適切なテキストアンダースコアの代わりに border-bottom を使用する時代は、ようやく実現する可能性があります。
結果は異なる場合があります:のサポートはまだ制限されているため、この投稿の例は、使用しているブラウザによっては正しく表示されない場合があります。
テキスト装飾
text-decoration プロパティは、 none 、 underline 、 overline 、およびline-の値の間でのみ選択されていました。 through ですが、新しい推奨事項では、新しい text-decoration-color 、 text-decoration-style 、およびtext-decoration-line[の省略形になります。 X325X]プロパティ。 たとえば、色付きの二重下線は次のとおりです。
.fancy {
-webkit-text-decoration: hotpink double underline;
text-decoration: hotpink double underline;
}
ファンシーアンダースコア
テキスト-装飾-色
あなたが想像するのと同じように動作します。 最後に、テキストの装飾色を変更する方法!
テキスト装飾スタイル
text-decoration-style は、テキスト装飾のタイプを定義するために使用され、新しい推奨事項は、doubleとwavyの2つの新しい値をもたらします。
.wavy {
text-decoration: underline;
-webkit-text-decoration-color: salmon;
text-decoration-color: salmon;
-webkit-text-decoration-style: wavy;
text-decoration-style: wavy;
}
波状の装飾
text-decoration-line
text-decoration-line は、 underline 、 overline 、 line-through 、 blink の値を受け入れます(点滅はただし、非推奨):
.strike {
-webkit-text-decoration-color: red;
text-decoration-color: red;
-webkit-text-decoration-line: line-through;
text-decoration-line: line-through;
}
これを打つ
text-decoration-skip
text-decoration-skip を使用すると、要素の一部に装飾が適用されるのを回避できます。 可能な値は、オブジェクト、スペース、インク、エッジ、およびボックス装飾です。
- ink :最後に、テキスト装飾がグリフの子孫と重ならないようにする方法:
.ink {
-webkit-text-decoration: darkturquoise solid underline;
text-decoration: darkturquoise solid underline;
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink;
}
カバ
- objects :テキスト装飾は、inline-blockの表示を持つ要素をスキップします。 これは初期値でもあります。
<p class="super">
Getting <span style="display: inline-block;">Very</span> Fancy
</p>
.super {
-webkit-text-decoration: peru solid overline;
text-decoration: peru solid overline;
-webkit-text-decoration-skip: objects;
text-decoration-skip: objects;
}
非常にファンシーを取得する
残りの値は、ブラウザではまだ十分にサポートされていません。
- スペース:装飾はスペースと句読点をスキップします。
- edges :テキスト装飾のある2つの要素が隣り合っている場合にギャップを作成します。
- box-decoration :装飾は、継承されたマージン、パディング、または境界線をスキップします。
text-underline-position
text-underline-position を使用すると、グリフに関連するテキスト装飾の位置を制御するさらに別の方法があります。 可能な値は、 auto 、 under 、 left 、およびrightです。
auto 、初期値を使用すると、ブラウザは通常、装飾をテキストベースラインの近くに配置します。
.auto {
-webkit-text-decoration: slateblue solid underline;
text-decoration: slateblue solid underline;
-webkit-text-underline-position: auto;
text-underline-position: auto;
}
カバ
…そして、 under を使用して、装飾がテキストの子孫の後にどのように配置されるかに注目してください。
.under {
-webkit-text-decoration: slateblue solid underline;
text-decoration: slateblue solid underline;
-webkit-text-underline-position: under;
text-underline-position: under;
}
カバ
text-underline-positionのleftおよびrightの値は、縦書きモードでのテキスト装飾を制御するために使用されます。
さあ、続けて、いくつかの派手なテキスト装飾で私たちを感動させてください!
ブラウザのサポート: 2020年現在、テキスト装飾を使用できますか?は、世界中の94% ofブラウザがプロパティを少なくとも部分的にサポートしていることを示しています。