Lopan.jp

とりとめないメモ。
動くリンク下線

一般的にはtext-decorationプロパティで表示するリンク下線。そのままだとカチッと消えるだけで味気ないですね。リンク下線を、アニメーションしながら出たり入ったりするためのTIPS。

リンク下線を動かすために

text-decorationプロパティunderlineのままではアニメーションできないので、別の方法で下線を描画することになります。

背景画像で引く下線

リンク下線を動かしたい場合は、背景画像で下線を表示させます。
リンクの文字色と同じ塗り色の1pxのgif画像を底辺に引っ付くように配置して、background-sizeプロパティで横幅いっぱいに広げます。

.text-line a {
	background: url(dot.gif) left bottom / 100% 1px no-repeat;
}

カーソルを乗せた時に、background-sizeの横幅が0になるように指定しておきます。

.text-line a:hover {
	background-size: 0 1px;
}
背景画像を使って下線を引く

これをtransitionプロパティでゆっくり変化するように指定すれば出来上がり。ここでは0.4秒で短くなってゆくように指定しています。

.text-line a {
	background: url(dot.gif) left bottom / 100% 1px no-repeat;
	transition: background-size .4s;
}

下線が出たり入ったりするようになりました:)
上サンプルでは画像の位置が、左下left bottom基準になってますが、カーソルを乗せた時だけ、右下right bottom基準になるように指定すると、下サンプルのような動きになります。なんだかよりスマートになった気がしますね:D

左から伸びて右へ縮む
.text-line a:hover {
	background-position: right bottom;
	background-size: 0 1px;
}

画像だとめんどくさい

けど、リンクの文字色に合わせて画像も作り直さなきゃいけないのは、ちょっと面倒臭いですね:(
背景画像もCSSで用意すべく、linear-gradient()関数という、CSSでグラデーション画像を生成するための書式を利用します。書き方は下記の通り。下の書き方だと、上から下へロイヤルブルーからスカイブルーへグラデーションする背景画像が生成されます。

.text-line a {
	background-image: linear-gradient(royalblue, skyblue);
}

今回は、リンク色と同じベタ塗り画像を用意したいので、currentColorキーワードを使うと便利です。currentColorその要素に指定されているcolorプロパティの色のこと。下記のように指定すれば、a要素colorと同じ色が、グラデーションの色として適用されます。

.text-line a {
	background-image: linear-gradient(currentColor, currentColor);
}

これを上サンプルの画像を指定してた部分と書き換えれば、これでもうどんな色のリンクでもどんとこいです;)

.text-line a {
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	transition: background-size .4s;
}

※CSSのカラーキーワードでは、大文字と小文字を区別しないので、currentcolorでも大丈夫。

リンク下線のバリエーション

backgroundプロパティで描画しているので、リンク下線にもいろいろバリエーションが付けられます。

マーカーみたいな下線

background-sizeプロパティで背景画像の高さを調整すれば、リンク下線の太さも自由自在です。ここでは、.5em(0.5文字分)の太さにしてみました。線の色は文字よりもちょっと薄めにしてます。これになると、別にリンクじゃなくて、読んで欲しい文章など、より際立たせたい文章に使うのも良いですねー;)

.text-line a {
	background: linear-gradient(lightblue, lightblue) 0 100% / 100% .5em no-repeat;
}

下線とマーカーが入れ替わる

ここでは、背景画像を「,(カンマ)」区切りで複数指定して、片方を1pxの線、もう片方をマーカーみたいな線で、交互に入れ替わるようにしてます。

.text-line a {
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat,
		linear-gradient(lightblue, lightblue) right 60% / 0 .8em no-repeat;
}
.text-line a:hover {
	background-position: right bottom, left 60%;
	background-size: 0 1px, 100% .8em;
}

上下に伸縮する

左右でなく上下に伸縮するようにすれば、もう下線じゃないけど、おもしろい効果になりますねー:D

ページトップへ戻る

リンク範囲を広げる

スマホなど小さなデバイスでもタップしやすいようにリンクエリアを広げると、下サンプルのように、リンク下線ごと広がって、なんだかみっともないです…:‹※下サンプルではリンク範囲がわかりやすいように背景を白くしてます。

.text-line a {
	padding: 1em;
	background: linear-gradient(currentcolor, currentcolor) 100% 100% / 0 1px no-repeat;
}

リンクエリアを広くしても、リンク下線を元の位置に表示したいとあらば、background-positionプロパティbackground-sizeプロパティで、背景画像の位置と大きさを調整すれば良いです。
周囲に1文字分のパディングが付いているので、画像位置の基準を1文字分右の、底辺から1文字分上にして、画像の横幅を全幅よりも2文字分狭くなるようにします。

.text-line a {
	padding: 1em;
	background: linear-gradient(currentcolor, currentcolor) 1em calc(100% - 1em) / calc(100% - 2em) 1px no-repeat;
}
リンク下線の位置と長さを調整

カーソルを乗せた時は、画像位置の基準を右から1文字分左に変えて、横幅は0になるようにします。

.text-line a:hover {
	background-position: calc(100% - 1em) calc(100% - 1em);
	background-size: 0 1px;
}

なんだかCSSが計算だらけでごちゃごちゃ嫌だーというならば、a要素の中身をspan要素で括って、span要素にリンク下線を表示すれば、位置を調整しなくてもよいし、わかりやすいです:)

.text-line a {
	padding: 1em;
}
.text-line a span {
	background: linear-gradient(currentcolor, currentcolor) 100% 100% / 0 1px no-repeat;
}

ページトップへ戻る

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください