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

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。
目次
1. ちょっと予備知識
今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition
プロパティです。transition
プロパティは、時間の変化を操作するもので、今まではマウスオーバーするとパッと色が変わっていたところを、ふわっと色を変えたり、ぼよーんと角度を変えたりする際の「ふわっ」「ぼよーん」を再現してくれます。あれ、なんだか説明が変…。以下のサイトで詳しく知ることができます。
ベンダープレフィックス
古いサイトや記事では-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 おすすめのエフェクトがあればぜひ教えてください!
ボケボケにするやつはちょっと微妙だけど、ボケていないテキストを全面にして前に浮き上がって来るようにすればカッコいいかも。
レインボーカラーになるhover、やってみました♪
自分のようなあまりwebデザインに詳しくない者にも出来ました。
遊び心満載な、manaさんの記事大好きです。
CoolなデザインCSSをありがとう。
「5. 光を放つグロー効果」でやってますが、PCのchromeとfirefox,safariではちゃんと表示されるのですが、IE10ではうまく表示されないです。なにがあるのでしょうか?
[…] コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ… […]