CSS テキスト装飾 text-decoration と text-emphasis の詳細な説明

CSS では、テキストは私たちが毎日扱う最も一般的なものの 1 つです。テキストの場合、テキストの装飾は不可欠です。

この記事では、テキスト装飾の比較的新しい 2 つの概念、 text-decorationとtext-emphasisについて説明します。最後に、 backgroundを使用してテキストの下線をシミュレートする興味深い動的効果についても説明します。

テキスト装飾 テキスト装飾

text-decorationテキストの装飾を意味し、非常に初期の仕様である CSS レベル 2 (リビジョン 1) の text-decoration にすでに存在していました。たとえば、下線のtext-decoration: underline 。

ｐ {
    テキスト装飾: 下線;
} 

新しい CSS テキスト装飾モジュール レベル 3 - text-decoration では、 text-decoration大幅に強化され、更新され、 text-decoration-line 、 text-decoration-color 、 text-decoration-style 、 text-decoration-thicknessなどのプロパティに進化しましたが、まだ標準にはなっていません。これらはそれらの略語です。

で：

• text-decoration-line : 要素内のテキストを設定するために使用される装飾の種類を制御します。テキストの下、上、またはテキストを貫通するかどうかを制御します。
• text-decoration-style : border-styleに似たsolidだけでなく、 double重実線、 dotted 、 dashed 、非常に興味深いwavyもサポートします。
• text-decoration-color : これは分かりやすく、色を制御します
• text-decoration-thickness : 装飾線の太さを制御します

すぐに理解するのに役立つ非常に良い図を以下に示します。

CodePen デモ -- テキスト装飾デモ

text-decoration-line も同時に設定できます

興味深い点はtext-decoration-line同時に設定できることです。

ｐ {
    テキスト装飾線: 上線、下線、取り消し線;
} 

上、中、下の 3 つの線が得られます。

テキスト装飾はトランジションやアニメーション化が可能

テキスト装飾のすべての値は遷移およびアニメーション化できます。適切に使用すれば、テキストで何かを強調する箇所で非常に役立ちます。

<p class="transition">Lorem ipsum dolor</p>

。遷移 {
    テキスト装飾線: 下線;
    テキスト装飾色: 透明;
    テキスト装飾の太さ: 0.1em;
    カーソル: ポインタ;
    遷移: 0.5秒;

    &:ホバー{
        テキスト装飾色: ピンク;
        テキスト装飾の太さ: 0.15em;
        色: ピンク;
    }
} 

別の属性text-underline-offsetを使用すると、次のような興味深い効果も実現できます。

もちろん、上記の例ではtext-underline-offsetの変換を使用していますが、CSS 自体はtext-underline-offsetの遷移アニメーションをサポートしていません。ここでは、 CSS @propertyを使用して、 text-underline-offsetの遷移アニメーションを巧みに実装しています。興味がある場合は、 CSS @propertyの使用方法について詳しく知ることができます。

CodePen デモ - テキストの下線遷移アニメーション効果

テキスト装飾色を色から分離する

text-decoration-colorとcolor 、これと同様に異なる値にすることができます。

。色 {
    テキスト装飾スタイル: 波状;
    カーソル: ポインタ;
    遷移: 0.5秒;

    &:ホバー{
        色: 透明;
        テキスト装飾色: ピンク;
    }
} 

興味深いことに、これを実行すると、実際に波線が得られます。

要素の疑似要素にwavy下線を追加し、ホバー時に波線をアニメーション化するアニメーションを追加すると、優れたホバー効果が得られます。

<p class="animation" data-content="Lorem ibsum dolor Lorem ibsum dolor">Lorem ibsum dolor</p>

.アニメーション{
    位置: 相対的;
    テキスト装飾: なし;
    オーバーフロー: 非表示;
    カーソル: ポインタ;
    行の高さ: 2;
    
    ＆：：前に {
        コンテンツ: attr(データコンテンツ);
        位置: 絶対;
        上: 0;
        左: 0;
        色: 透明;
        空白: ラップなし;
        テキスト装飾線: 下線;
        テキスト装飾スタイル: 波状;
        テキスト装飾色: #000;
        Zインデックス: -1;
    }
    &:hover::before {
        アニメーション: 3 秒間無限直線移動;
    }
}
@keyframes 移動 {
    100% {
        変換: translate(-209px, 0);
    }
} 

擬似要素を使用して、テキスト自体よりも長いテキストを追加し、色は透明ですが、波線の色を設定します。そして、ホバーすると、 translate擬似要素を移動することで波線がずれます。translate 値をわずかにtranslateすることで、アニメーションの開始と終了をつなげて、波線が動いているような効果を実現できます。

CodePen デモ -- テキスト装飾デモ

テキスト強調 テキスト強調

text-emphasisとは、テキストの強調を意味します。これは、CSS テキスト装飾モジュール レベル 3 で追加された新しいプロパティです。テキスト強調の効果を高めるために使用されます。

以前は、いくつかの単語を強調したい場合、太字や斜体などのより一般的なテキスト スタイルを使用していました。

{
    font-weight: bold; // 太字 font-style: italic; // 斜体}

さて、テキストを強調する興味深い方法があります。 text-emphasis 。

テキスト強調構文

text-emphasis にはtext-emphasisとtext-emphasis-positionが含まれており、テキストの上または下にさまざまな強調装飾やさまざまな色を追加できます。

簡単なデモをご覧ください:

<p>
   これは <span>テキスト強調</span> です。
</p>

p スパン{
    テキスト強調: 円;
}

text-emphasis: circleの効果は、折り返されたテキストの上に円形のグラフィックを追加することです。効果は次のとおりです。

もちろん、デフォルトは黒ですが、円の後に色を追加できます。

p スパン{
    テキスト強調: 円 #f00;
} 

circleに加えて、選択できるグラフィックは他にもたくさんあり、渡す文字や絵文字表現もカスタマイズできます。

<p>
    ABCD E F
    GH
    私J
    クアラルンプール
    <span class="emoji">ま、ん</span>
</p>

.キーワード{
    テキスト強調: 円 #f00;
}
。言葉 {
    テキスト強調: 'x' 青;
}
.絵文字 {
    テキスト強調: '😋';
} 

テキスト強調位置構文

テキストの上にあることに加えて、 text text-emphasis-positionを使用してテキストの上または下に配置することを選択し、特定の範囲内で強調図形の位置を変更することもできます。

このプロパティは、上と下、左と右の 2 つのパラメータを受け入れます。

text-emphasis-position: [ over | under ] && [ right | left ]?

.キーワード{
    テキスト強調: 円 #f00;
}
。言葉 {
    テキスト強調: 'x' 青;
    テキスト位置: 左上;
}
.絵文字 {
    テキスト強調: '😋';
    テキスト位置: 左下;
}

テキストの書き順がwriting-mode: lrと同様に水平方向の場合は、 overとunderのみが必要です。テキストレイアウトモードがwriting-mode: vertical-lrと同様に垂直方向の場合は、 rightまたはleftキーワードが使用されます。

ｐ {
    書き込みモード: 垂直方向;
}
.キーワード{
    テキスト強調: 円 #f00;
}
。言葉 {
    テキスト強調: 'x' 青;
    テキスト位置: 左上;
}
.絵文字 {
    テキスト強調: '😋';
    テキスト位置: 右下;
} 

背景を使用して下線をシミュレートする

CSS によってネイティブに提供されるtext-decorationとtext-emphasisに加えて、他の要素を通じていくつかのテキスト装飾効果をシミュレートすることもできます。

最も一般的な方法は、 backgroundを使用して下線をシミュレートすることです。

backgroundを使用してテキストの下線効果をシミュレートする簡単なデモをご覧ください。

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>、molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium v​​ero.</p>

ｐ {
    幅: 600ピクセル;
    フォントサイズ: 24px;
    色: #666;
}
{
    背景: 線形グラデーション(90度, #0cc, #0cc);
    背景サイズ: 100% 3px;
    背景繰り返し: 繰り返しなし;
    背景位置: 100% 100%;
    色: #0cc;
}

backgroundを使用してテキストの下線効果をシミュレートします。効果は次のようになります。

あるいは、 backgroundを使用して点線の下線をシミュレートします。

{
    背景: linear-gradient(90度、#0cc 50%、透明50%、透明1px);
    背景サイズ: 10px 2px;
    背景繰り返し: 繰り返しx;
    背景位置: 100% 100%;
} 

CodePen デモ - 背景を使用して下線と破線の下線をシミュレートする

もちろん、これは最も基本的なものです。 backgroundのさまざまなプロパティを巧みに使用することで、さまざまな興味深い効果を実現できます。

background-sizeとbackground-positionを巧みに変更してテキストのホバー効果を実現します。

ここでは、 background-sizeとbackground-positionプロパティを巧みに変更することで、非常に興味深いテキストホバー効果を実現できます。

このようなデモを見てみましょう。コア コードは、 <p>タグで囲まれた<a>タグに対して動作します。

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>、molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium v​​ero.</p>

{
    背景: 線形グラデーション(90度, #ff3c41, #fc0, #0ebeff);
    背景サイズ: 0 3px;
    背景繰り返し: 繰り返しなし;
    背景位置: 0 100%;
    遷移: すべて 1s;
    色: #0cc;
}

ホバー{
    背景サイズ: 100% 3px;
    色: #000;
}

background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff)を設定しましたが、最初はデフォルトのbackground-size: 0 3pxため、下線は最初は表示されません。ホバーすると、 background-size: 100% 3pxに変更します。このとき、 0 3pxから100% 3pxへの変換が行われ、何もない状態から何かがある状態への伸縮効果が得られます。

最終的な効果を見てみましょう:

background-positionが0 100%に設定されているため、 background-position 100% 100%に設定されている場合、逆の効果が得られます。

// 他のすべてはそのままにして、background-position のみを 0 100% から 100% 100% に変更します
{
    ...
    背景位置: 100% 100%;
    ...
}

効果を見てみましょう。上のアニメーションと比較して、具体的な違いを確認してください。

CodePen デモ - 背景の下線アニメーション

さて、 backgroundを使用して 2 つの重なり合う下線を実装し、上記の 2 つの異なるbackground-position値を使用すると、より興味深い下線のホバー効果を得ることができます。

CSS コード図。背景を使用してシミュレートされた 2 つの下線のbackground-position値が異なることに注意してください。

{
    背景： 
        線形グラデーション(90度, #0cc, #0cc),
        線形グラデーション(90度、#ff3c41、#fc0、#8500d8);
    背景サイズ: 100% 3px, 0 3px;
    背景繰り返し: 繰り返しなし;
    背景位置: 100% 100%、0 100%;
    遷移: すべて 0.5 秒;
    色: #0cc;
}
ホバー{
    背景サイズ: 0 3px、100% 3px;
    色: #000;
}

このような効果が得られます。実際、マウスをホバーするたびに、2 つの下線が動きます。

CodePen デモ - 背景の下線アニメーション

やっと

さて、これでこの記事は終わりです。テキスト装飾の興味深いプロパティとアニメーションをいくつか紹介しました。お役に立てば幸いです😃

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

CSS テキストデコレーション text-decoration と text-emphasis の詳細な説明はこれで終わりです。CSS テキストデコレーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。