見事なアニメーションの下線テキスト効果を作成するための10のCSSスニペット

公開: 2021-03-08

デフォルトのCSSアンダースコアはうまく機能します。誰がそれを嫌うことができますか？

しかし、物事を改善する余地は常にあります。下線でできることはたくさんあるとは思わないかもしれませんが、CSSアニメーションを詳しく調べると、実際にどれだけのことができるかがわかります。

私は無数のCSSアンダースコアスタイルを並べ替え、Web上で最高のカスタムアンダースコアを選択しました。これらのいずれかが目に入った場合は、気軽に飛び込んでソースコードをいじってみてください。

1.交互の下線

これらのリンク間でカーソルを移動すると、ちょっと面白いことに気付くでしょう。ナビゲーションメニューの下線効果は、実際にはリンク間のスタイルを変更します。

それだけでなく、ナビゲーションを動的に移動して、1つの単一のブロックであるかのような錯覚を与えます。かなりかっこいいですよね？

下線付きのブロックをHTML要素に追加することで、CSSを少し使ってこれらすべてを自分で行うことができます。必要なコードがどれだけ少ないかを考えると、驚くほど簡単です（約60行のCSS）。

2.複数の行にまたがる

CSSの改行スタイルは注意が必要で、回避するのは簡単ではありません。しかし、何人かの創意工夫を凝らした開発者であるWill Kingは、バグなしで複数の行にまたがることができる動的な下線効果を作成するこのペンを作成しました。

これは、行をそのまま維持するためにJavaScriptのビットに依存していることに注意してください。ただし、ページ上の任意のリンクを操作するのに十分な動的性もあるため、テキストのフォーマット方法は関係ありません。

さらに、この全体は、背景にカスタムCSS3グラデーションを使用しています。これはかなりクールです。

3.下線をスライドさせる

開発者のRyanMorseは、CSSのみに依存するこの非常に単純なスライドアンダースコア効果を作成しました。余分なHTMLアイテムさえ必要としないことを考えると、これはかなりエレガントなソリューションです。

他のサイトと同じようにナビゲーションメニューをデザインし、このCSS効果を使用して動的なスライドアニメーションを作成できます。さらに、すべての結果は、イージングと合計期間を含むCSSコードで変更できます。

4.より良いテキストの下線

一見すると、この下線で何も変わっていないことに気付くかもしれません。しかし、それをページの下の「デフォルト」デモと比較すると、これは実際にはるかに良く見えることがわかります。

Lukas Horakのより優れたテキストの下線では、テキストの下のバーが降順の要素によりよく適合していることがわかります。これは、線が通常の線の高さより下に落ちる「g」や「p」のような文字形式を考慮します。

また、アンダースコア自体がテキストの下に少しだけ下にプッシュされるため、ブラウザのデフォルトと比較して新しい外観になります。

5.アニメーションスタイル

このユニークなペンは、開発者のMatthewScottによって純粋なCSSで作成されたいくつかのカスタムアンダースコア効果を備えています。

これは、いくつかの一般的なCSSトランジションに基づいた4つの非常に具体的なアンダースコアスタイルを誇っています。

右から左に
左から右へ
外向きにアニメーション化
内側へのアニメーション

これは、リンクにカーソルを合わせている間と、リンクからカーソルを移動しているときの両方で機能する一般的なCSS3トランジションで機能することに気付くでしょう。

確かにいくつかのクールな効果があり、それらはすべて自分のプロジェクトに移植するのが非常に簡単です。

6.その他のアニメーションスタイル

これは、カスタムアンダースコアアニメーションの別のパックです。これらは、開発者Ksesoによって作成されたものです。

これらは、下線のスタイルがCSS3の影を押して光る効果をもたらすため、もう少し極端になります。時間があれば（またはスターウォーズが大好きな場合）、これをテンプレートとして使用して、スターウォーズのライトセーバーのデザインを作成できます。

7.立ち寄るだけ

私はいくつかのウェブサイトでこの効果を見てきました、そしてそれはおそらく私のお気に入りの1つです。ドロップダウンアンダースコアは純粋なCSSを使用し、トランジション効果でラインをアニメーション化して表示します。

このアニメーションを使用すると、各下線の「境界線」が各リンクに接続しているように感じられます。リンク間をスライドする線よりも、この効果がよりきびきびとより直接的に感じられるので、私はそれが好きです。

効果に下線を引くための真のミニマリストアプローチが必要な場合は、このコードを使用してみてください。

8.アニメーションの拡張

拡大するアンダーラインスタイルは、前述のアンダーラインパックに含まれています。ただし、この特定の下線は、カスタムアニメーションのタイミングを使用するため、少し異なります。

ホバー時に一意のアニメーションを作成するためにcubic-bezier（）関数を使用していることに注意してください。

これは、デフォルトの「線形」遷移よりも少し速く実行されるため、まったく異なる効果が得られます。また、ベジェアニメーションを自分でカスタマイズして、独自の下線スタイルを作成することもできます。

9.カスタムCSSの下線

これは、どのWebサイトでも実際に機能する別のスタイルです。開発者のTristanWilsonは、テキストの下の数ピクセル下の線を縁取るこれらの単純な下線を作成しました。

気付くのは微妙ですが、使いやすさに大きな違いはありません。この効果は、実際には、余分な使いやすさよりも美学に関するものです。

下線をすべての群れから本当に目立たせたい場合は、このセットから始めるのが最適です。

10.ディセンダー間のフィッティング

先ほど、タイプのディセンダーに合わせてアンダースコアスタイルをカスタマイズすることについて説明しました。ジョナサンニールによるこのペンはまさにそれを行い、HTML5とCSS3しか使用していません。

全体の効果は、CSS3のいくつかのプロパティ（正確にはbox-shadowとtext-shadow）に依存します。

これにより、ディセンダー要素の横にスペースがあるような錯覚が生じ、アンダースコアがより上品な感じになります。

どんなウェブサイトにとっても間違いなくクリーンな選択であり、アンダースコアの色を変えるのにも良い方法です。

11.カスタムグラデーション

本当に限界を超えようとしているのなら、このペンをカスタムの下線グラデーションスタイルで作り直してみてください。

グラデーションはCSS3を介して実行されるため、色を好きなように変更できます。そして、あなたがそれを信じることができれば、これは機能するために余分なHTMLを必要としません。必要なアンカーリンクをターゲットにして、CSSコードをコピーして貼り付けるだけで、独自のグラデーションの下線を取得できます。

これらすべてのデザインの中で、このコレクションから取り除ける素晴らしい効果が1つあることを願っています。

デザイナーは常にアンダースコア効果について考えるわけではありませんが、タイポグラフィでできることはたくさんあります。CSSの使い方を知っていれば、実際には空が限界です。