はじめに
この実験では、CSSを使って下線を引いた美しいテキストを作成する方法を学びます。text-shadowとbackground-imageをlinear-gradientと組み合わせることで、下線として機能するグラデーションを作成し、テキストが選択可能なままにすることができます。この手法は、text-decoration: underlineよりも視覚的に魅力的な代替手段を提供します。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSSを使って下線を引いた美しいテキストを作成する方法を学びます。text-shadowとbackground-imageをlinear-gradientと組み合わせることで、下線として機能するグラデーションを作成し、テキストが選択可能なままにすることができます。この手法は、text-decoration: underlineよりも視覚的に魅力的な代替手段を提供します。
VM内には既にindex.html
とstyle.css
が用意されています。
下線を引いた文字が下線を切り取らないようにするには、text-shadow
を4つの値で使用して、下線との交差部分を覆う太い影を作成します。text-shadow
の色をbackground
の色と一致させ、より大きなフォントに対してpx
値を調整します。background-image
とlinear-gradient()
とcurrentColor
を使って実際の下線を作成します。background-position
、background-repeat
、background-size
を設定して、グラデーションを正しい位置に配置します。::selection
疑似クラスセレクタを使って、テキストの影がテキスト選択を妨げないようにします。この効果は本来text-decoration-skip-ink: auto
として実装されていますが、下線に対する制御が少ないことに注意してください。
以下はコードの例です。
<div class="container">
<p class="pretty-text-underline">
Pretty text underline without clipping descenders.
</p>
</div>
.container {
background: #f5f6f9;
color: #333;
padding: 8px 0;
}
.pretty-text-underline {
display: inline;
text-shadow:
1px 1px #f5f6f9,
-1px 1px #f5f6f9,
-1px -1px #f5f6f9,
1px -1px #f5f6f9;
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
}
.pretty-text-underline::selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。
おめでとうございます!美しいテキストの下線の実験を完了しました。技術力を向上させるために、LabExでさらに実験を行って練習してください。