CSS

CSSでもっと魅力的に!動きのある下線をグラデーションで作ってみよう

  • このエントリーをはてなブックマークに追加

今回作りたいもの

テキストにグラデーションで下線を引き、マウスオーバーでグラデーションが縦方向に伸びる動きをつけたいと思います。

HTMLの準備

表示したいテキストを自由に書きます。
今回は、h1タグとpタグでそれぞれ書きました。

タグは自由です。divでもh2でも。

下線を引きたいテキスト部分にクラス名をつけます。

ここでは class=”underline” としました。

クラス名も自由です。

テキストにCSSで下線を引く

テキストにグラデーションの下線を引くには background を利用します。

1. 背景色はlinear-gradientを使用し、中身は(角度, 開始色 開始位置, 終了色 終了位置)となっています。
今回は120度の角度で、テキストの頭(0%の位置)を水色に、テキストの最後(100%の位置)を紫にしています。

2. background-repeatは、今回は繰り返さないのでなしにしています。

ここまでの2つで、テキストに対し、高さいっぱいのグラデーションができました。↓↓↓

3. 下線っぽくするには、background-sizeで高さを調整します。
background-sizeは(横のサイズ 縦のサイズ)となっているので、
今回は(横100% 高さ0.4em)としています。

ここでは単位は%, emのほか、pxも使用できます。

ここまでの1〜3で、上から下線ができました。↓↓↓

4. 最後に、テキストの下に下線を引きたいので、background-positionで位置を調整します。
background-positionは(左からの開始位置 上からの開始位置)となっており、
今回は(左から開始 上は90%の位置から開始)としています。

これも単位は%やpxなどを使用できます。

動きをつけよう

せっかくなので、下線部分のテキストにマウスオーバーしたら、下線が広がる動きをつけます。

ホバー時に、background-sizeの高さの方を90%にします。(100%でもいいですよ。)

するとこんな感じ↓↓↓

カクカクした感じになるので、これをスムーズにするにはtransitionを使用します。

transitionは動きをスムーズにできる

underlineにcssでtransitionを設定追加します。

ここではbackground-sizeに0.25秒かけて高さを90%まで広げる命令です。
*0秒だと、さっきのカクカクした動作。

そして完成。

最終的な動作はこちらから

デモページはこちらからご確認いただけます。
http://sample.creativeflake.com/gradunderline.html

  • このエントリーをはてなブックマークに追加