どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。

目次

1. ちょっと予備知識
2. 文字色をふんわり変える
3. 背景色をふんわり変える
4. 文字をぼかす
5. 光を放つグロー効果
6. 背景を角丸に
7. レインボーカラーに
8. 拡大・縮小
9. 角度を変える
10. くるっと回転

1. ちょっと予備知識

今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、今まではマウスオーバーするとパッと色が変わっていたところを、ふわっと色を変えたり、ぼよーんと角度を変えたりする際の「ふわっ」「ぼよーん」を再現してくれます。あれ、なんだか説明が変…。以下のサイトで詳しく知ることができます。

• transition－CSS3リファレンス
• 【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ : アシアルブログ

ベンダープレフィックス

古いサイトや記事では-webkit- や -moz- といった、プロパティの先頭についているものがあるかと思います。これはベンダープレフィックスと呼ばれ、正式にはまだCSS3として採用されていないプロパティを、各ブラウザーに対応させるためにプロパティの先頭につけます。

• -webkit- → Google Chrome、Safari
• -moz- → Firefox
• -o- → Opera
• -ms- → Internet Explorer

border-radius プロパティをはじめ、いくつかのプロパティはすでにベンダープレフィックスなしで動作します。「CSS current work & how to participate（英語）」のオレンジ色のものはまだベンダープレフィックスを必要とするプロパティです。ベンダープレフィックスの要不要に迷ったら、一度チェックしておきましょう。

対応ブラウザー

今回紹介するエフェクトはGoogle Chrome、Safari、Firefox、Operaで動作します。IE9ではふんわり効果以外それとなく対応。 ※7. レインボーカラー はChrome、Safariのみ対応。

目次へ

2. 文字色をふんわり変える

a:hover で文字色を変更しているWebサイトが多いかと思いますが、 transition プロパティでふんわりとさせることができます。

サンプル

See the Pen
Basic CSS Transition – text color by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}
a:hover {
    color: #0bd;
}

目次へ

3. 背景色をふんわり変える

文字色と同様に、背景色もふんわりと。ボタン扱いのリンクでも使える技ですね。

サンプル

See the Pen
Basic CSS Transition by Mana (@manabox)
on CodePen.

CSS

a{
    color:#fff;
    background: #03c;
    text-decoration:none;
    padding:0 3px;
    transition: 0.5s;
}

a:hover {
    background: #39f;
}

目次へ

4. 文字をぼかす

text-shadow でふんわりと文字をぼかすことができます。数値を変更してぼかし具合を調整可。

サンプル

See the Pen
CSS Transition – Text Blur by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}
a:hover {
    color: transparent;
    text-shadow: 0 0 5px #03c;
}

目次へ

5. 光を放つグロー効果

上記ぼかし効果では文字色を透明にし、影のみを表示しましたが、この効果では文字色を白にして、text-shadow で光っているように表示します。

サンプル

See the Pen
CSS Transition – Text Glow by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}

a:hover {
    color: #fff;
    text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
}

目次へ

6. 背景を角丸に

こちらもボタン扱いのリンクに使えそうな効果。テキストリンクに背景色をつけると、デフォルトでは四角に表示されますが、こちらを角丸に変化させることができます。

サンプル

See the Pen
CSS Transition – Border Radius by Mana (@manabox)
on CodePen.

CSS

a{
  color:#fff;
  background: #03c;
  text-decoration:none;
  padding:0 3px;
  transition: 0.5s;
}
a:hover {
  border-radius:30px;
}

目次へ

7. レインボーカラーに

背景色をグラデーションにし、-webkit-background-clip: text; でテキストに合わせてくりぬく方法。今のところChrome、Safariのみ対応しています。対応していないブラウザーでは背景色がレインボーカラーになります。

サンプル

See the Pen
CSS Transition – Text Rainbow Color by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}

a:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
}

目次へ

8. 拡大・縮小

リンクプロパティの a タグはインラインなので、display: inline-block; で transform プロパティが使えるようにします。font-size で変化させてもいいのですが、その場合は他の文章まで影響されるので、ここでは scale を使いました。

サンプル

See the Pen
CSS Transition – Text Size by Mana (@manabox)
on CodePen.

CSS

a {
  display: inline-block;
  color: #03c;
  transition: 0.5s;
}
a:hover {
  transform: scale(1.5, 1.5);
}

目次へ

9. 角度を変える

こちらも display: inline-block; 使用。数値によっては目障り感アップなので取り扱い注意。

サンプル

See the Pen
CSS Transition – Rotate Text Link by Mana (@manabox)
on CodePen.

CSS

a {
  display: inline-block;
  color: #03c;
  transition: 0.5s;
}
a:hover {
  transform: rotate(10deg);
}

目次へ

10. くるっと回転

span で囲って、transform でくるっと回転する時に文字が見えなくなるので、 :after ＋ content で擬似要素を表示して…と、かなりごにょごにょしています。コードも長く、手間がかかりますが、かっこいい効果ですね！

サンプル

See the Pen
CSS Transition – Rolling Text Link by Mana (@manabox)
on CodePen.

HTML

<a href="#"><span data-title="Text Link">Text Link</span></a>

CSS

a {
  color: #03c;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
a span {
  display: block;
  position: relative;
  padding: 0 2px;
  transition: all 400ms ease;
  transform-origin: 50% 0%;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
a:hover span {
  background: #03c;
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
a span:after {
  content: attr(data-title);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 2px;
  color: #fff;
  background: #03c;
  transform-origin: 50% 0%;
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

目次へ

CSSを少し付け加えるだけでかっこいい表現ができちゃいますね。中には数値によって目障りになる可能性大なものもあるので、やりすぎ注意ですw おすすめのエフェクトがあればぜひ教えてください！

Every website has text links. Normally it’s used hover selector and change text colour which is very simple effect. I was wondering if I can add better effect so this article will share how to add cool effect using CSS3.
続きを読む