コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ

目次

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 プロパティでふんわりとさせることができます。

サンプル

CSS

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

目次へ

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

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

サンプル

CSS

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

a:hover {
  background: #39f;
}

目次へ

4. 文字をぼかす

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

サンプル

CSS

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

目次へ

5. 光を放つグロー効果

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

サンプル

CSS

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

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

目次へ

6. 背景を角丸に

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

サンプル

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 のみ対応しています。対応していないブラウザーでは背景色がレインボーカラーになります。

サンプル

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 を使いました。

サンプル

CSS

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

目次へ

9. 角度を変える

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

サンプル

CSS

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

目次へ

10. くるっと回転

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

サンプル

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 おすすめのエフェクトがあればぜひ教えてください！