CSS Secret Garden: カスタム Underline_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@範囲、@彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

デザイナーは非常にこだわりのある人々のグループです。私たちは常に、何かをカスタマイズしてから、必要な視覚効果に非常に似たものになるように慎重にデザインすることを好みます。これにより、デザインがより直観的で使いやすくなります。結局のところ、デフォルトで良いと思われるものはほとんどありません。

テキストの下線は、私たちが本当にカスタマイズしたいものの 1 つです。デフォルトのものはうまく機能しますが、邪魔に感じられ、ブラウザごとにレンダリングが異なります。テキストの下線は Web の初期から使用されてきましたが、それをカスタマイズするこれ以上の方法はまだ見つかっていません。 CSS の登場後も、オン/オフの権限しかありません:

text-decoration: underline;

以前と同様、適切なツールがない場合は、自分で解決する必要があります。テキストの下線をカスタマイズする方法がないため、境界線を使用してそれを偽装する必要があります。そこで思い浮かぶ最初の CSS トリック:

a[href] {    border-bottom: 1px solid gray;    text-decoration: none;}

border-bottom を使用してテキストの下線をシミュレートすると、色、太さ、スタイルを制御できますが、完璧ではありません。下の図で見ることができます

これらの「下線」とテキストの内容の間には非常に大きなギャップがあり、まるでテキストの次の行にあるようです。次のように、display: inline-block; と小さな line-height 値を指定することで、この問題を解決することができます:

display: inline-block;border-bottom: 1px solid gray;line-height: .9;

これにより、下線がテキストに近づきますが、通常のテキストの折り返しに影響します。写真は示す。

境界線に基づいて「下線」の問題を解決しようとしますが、テキストを折り返す必要があります - これはめちゃくちゃです

さて、下線をシミュレートするために内側のシャドウ box-shadow を使用してみましょう:

box-shadow: 0 -1px gray inset;

ただし、これはボーダーとは異なります。ボトムにも同じ問題がありますが、影がテキストにわずかに近い点が異なります。明確で柔軟、カスタマイズ可能な下線を取得する方法はありますか?

ソリューション

最良のソリューションは、多くの場合、最も予期せぬ場所から生まれます。この例では、background-image の役割とその関連プロパティが関係します。おかしな話に聞こえるかもしれませんが、ちょっと待ってください。背景はテキストを完全に包み込むことができ、background-size など、CSS3 の背景と境界線のいくつかの新しい背景関連プロパティに基づいて、背景を非常に正確に制御できます。 CSS グラデーションを介して背景画像を生成できるため、個別の HTTP リクエストを追加する必要さえありません。

background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.15em;

以下の画像で、非常に素晴らしい効果を確認できます。

しかし、小さな改善をすることもできます。 p や y などの文字にアンダースコアがどのように入っているかに注目してください。周囲に適切な余白があったほうがよいでしょうか。背景が単色の場合、2 つのテキストシャドウを設定できます。そのうちの 1 つは背景と同じ色です:

background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.15em;text-shadow: .05em 0 white, -.05em 0 white;

効果は次のようになります:

ここでは非常に柔軟であるため、グラデーションが使用されています。 。たとえば、点線の下線を作成するには、次のように記述します:

background: linear-gradient(90deg,gray 66%, transparent 0) repeat-x;background-size: .2em 2px;background-position: 0 1em;

効果は以下のようになります:

このようにして、カラー スケールを通じて点線の間隔を制御し、背景を通じて点線のサイズを制御できます。サイズ。

練習として、スペルミスを強調するために使用されるような赤い波線の下線を作成してみることができます (ヒント: 2 つのグラデーションが必要です)。以下の例で解決策が見つかりますが、答えを見る前に、次のことを試してください。まずは自分でやってみよう - もっと楽しくなるよ。

ヒント: 将来のテキストの下線

将来、下線をカスタマイズするのにそれほど面倒な作業は必要なくなります。 CSS3 テキスト装飾では、次のように、このためにカスタマイズされたプロパティがいくつかあります:

• text-decoration-color は、下線やその他の装飾の色をカスタマイズするために使用されます
• text-decoration-style は、装飾スタイルをカスタマイズするために使用されます(例: 実線、破線、波線など)
• text-decoration-skip スペースのスキップ、文字のまたがり、その他のオブジェクト
• text-underline-position 下線の位置の微調整

ただし、これらのプロパティは Currentブラウザのサポートは非​​常に最小限です。

詳しく読む

• CSS デザイン: カスタム下線
• CSS でカスタムテキストの取り消し線を作成する
• より完璧なリンク下線を目指して
• カスタマイズされた下線