CSSテックラボ

テキストのアンダーラインをグラデーションにする

2018年11月15日

テキストにアンダーラインを付け加えたい場合、CSS属性のtext-decorationの値にunderlineをセットするのが一番簡単な方法です。

<div class="h-1">Jaan <span class="underline-demo">Pehechaan</span> Ho</div>
<style>
.underline-demo{
	text-decoration: underline;
}
</style>
Jaan Pehechaan Ho

ただし、この方法だとアンダーラインの太さや色を自由に設定することはできません。text-decorationを使う代わりに、background属性を使うと背景の色やサイズをコントロールすることができます。今回は見栄えにこだわり、グラデーションのアンダーラインを作成します。グラデーションはlinear-gradient()関数を使います。

構文:
linear-gradient( グラデーションの角度または方向, 開始色, 途中色, 終了色 )

次の例では、SPANで囲ったテキストの背景にグラデーションをかけています。この時点ではアンダーラインというより単なる背景色ですね。

<div class="h-1">Jaan <span class="underline-gradient">Pehechaan</span> Ho</div>
<style>
.h-1 .underline-gradient{
	background-image: linear-gradient(to right, #185a9d, #43cea2); 
	color: #fff;
}
</style>
Jaan Pehechaan Ho

それでは、アンダーラインっぽく見えるように調整してみましょう。せっかくグラデーションを掛けたので、アンダーラインの線は太めにします。線のように見せるポイントはbackground-size属性です。
background-sizeは色々な指定方法がありますが、ここでは次の構文を使います。

background-size: 横幅 縦幅

この構文を使って、縦幅を短くすることができます。縦幅の指定を100%以下にすれば線が細くなります。これで短くはなるのですが、このままだと線が上付きになってしまうので、background-position属性にbottomを指定します。全容は次の通りです。

<div class="h-1">Jaan <span class="underline-gradient2">Pehechaan</span> Ho</div>
<style>
.h-1 .underline-gradient2{
	background-image: linear-gradient(to right, #185a9d, #43cea2);
	background-repeat: no-repeat;
	background-size: 100% 30%;
	background-position: bottom;
}
</style>
Jaan Pehechaan Ho

ロールオーバー時のアニメーションも付け加えてみましょう。transition属性を使い、アニメーションは背景のサイズのフォントのカラーとします。

<div class="h-1">Jaan <span class="underline-gradient3">Pehechaan</span> Ho</div>
<style>
.h-1 .underline-gradient3{
	background-image: linear-gradient(to right, #185a9d, #43cea2);
	background-repeat: no-repeat;
	background-size: 100% 30%;
	background-position: bottom;
	transition: all 0.25s ease-in;
}
.h-1 .underline-gradient3:hover{
	background-image: linear-gradient(to right, #185a9d, #43cea2);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: bottom;
	color: #ffffff;
}
</style>
Jaan Pehechaan Ho

単色でよければ、linear-gradient属性のtransparentでも同様のことができます。linear-gradient属性のtransparentは透かし範囲の指定なので、100%に近くなるほど線が細くなります。

<div class="h-1">Jaan <span class="underline-gradient5">Pehechaan</span> Ho</div>
<style>
.h-1 .underline-gradient5{
	background-image: linear-gradient(transparent 70%, #43cea2 0)
}
</style>
Jaan Pehechaan Ho

CodePenでもコードを公開しています。

CodePen: https://codepen.io/zionboogie/pen/VVMdgj

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

CONTACT US

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。