webfeelfree

リンクテキストや文字の色がふわっと変わるCSS3と記述位置の疑問点

今回は、CSSのデフォルトに記述すれば、サクッと設定することのできる、リンクや文字をマウスオーバーしたらふわっと色が変わるCSSをメモっておきます。

これであなたも最新のCSS?、CSS3デビューだ!

デモは、記事の最後の方にあります。

transitionプロパティを設定する

HTML

<a href="#" class="demo2">【demo2】文字がふわっと赤くなるよ。</a>

CSS

.demo2{
    color: #00f;
    /*-webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -ms-transition: 2s;*/
    transition: 2s;
}
.demo2:hover {
    color: #f00;
}

transitionプロパティを設定して、値には変化に要する時間を設定します。
単位は「s」です。
「second」の「s」だと思います。
ちなみに、小数点でも設定することができます。

うまく動作しないときは、ベンダープレフィックスを使ってみましょう。
上のコメントアウトしてある部分を参考にしてみてください。

transitionの記述位置を変えるとどうなるの?

はじめは上のコーディングではなく、これから紹介する位置に記述してしまいました。
というのは、マウスオーバー(:hover)してから色が変わるんだから、:hoverとセットが自然じゃない?というか、コーディングしたときに見やすいからこうでもいいのでは?と思ってしまったからです。

ということでtransitionプロパティの記述の場所を変えるとどうなるのか、比べてみました。

HTML

<a href="#" class="demo3">【demo3】文字がふわっと赤くなるよ。</a>

CSS

.demo3{
    color: #00f;
}
.demo3:hover {
    color: #f00;
    transition: 2s;
}

結果は、マウスオーバーしたときは、文字の色がふわっと変わります。
ですが、ポインタを離した時にふわっとせず、サッと変わってしまいました。

う~ん、ある意味、よく出来ています。
英語だけに結論が先なのか?、深い理由は勉強不足です。

今後、仕様が変わって違う動きになるかもしれませんが、記述するときは、目的やデザインに合わせて記述してみてください。

デモ

ふわっというか、じわっとです。

See the Pen 文字の色をふわっと変える by webfeelfree (@webfeelfree) on CodePen.4259

あとがき

コーディングが分からなくても、マウスオーバーするとこういう変化が起きるだなぁ~と、Webサイトの見え方も変わってくると思います。
無駄にマウスオーバーが増えるかも!

文字が光っている感じや、温かさなどWebサイトの雰囲気を演出するのに使ってみてはいかがでしょうか?

参考
コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

最新記事

読まれている記事

ツイッター

カテゴリー