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

thumb_text-links

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

目次

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

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

サンプル

CSS

a{
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
a:hover {
    color: #39f;
}

目次へ

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

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

サンプル

CSS

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

a:hover {
    background: #39f;
}

目次へ

4. 文字をぼかす

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

サンプル

CSS

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

目次へ

5. 光を放つグロー効果

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

サンプル

CSS

a{
    color: #03c;
    -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     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;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
a:hover {
    border-radius:30px;
}

目次へ

7. レインボーカラーに

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

サンプル

CSS

a{
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    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;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
}

目次へ

9. 角度を変える

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

サンプル

CSS

a{
    display: inline-block;
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

目次へ

10. くるっと回転

Webdesigner Depotで使用されているテキストリンクの効果を再現。ブロック要素にするために span で囲って、transform でくるっと回転する時に文字が見えなくなるので、 :aftercontent で擬似要素を表示して…と、かなりごにょごにょしてる模様。コードも長く、手間がかかりますが、かっこいい効果ですね!

サンプル

HTML

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

CSS

a{
    color: #03c;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    -ms-perspective: 600px;
    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;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

a:hover span {
    background: #03c;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    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;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

目次へ

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

シェアする

コメント

  • http://www.facebook.com/yusuke.kohno.9 Yusuke Kohno

    ボケボケにするやつはちょっと微妙だけど、ボケていないテキストを全面にして前に浮き上がって来るようにすればカッコいいかも。

  • とらねこ

    レインボーカラーになるhover、やってみました♪
    自分のようなあまりwebデザインに詳しくない者にも出来ました。
    遊び心満載な、manaさんの記事大好きです。

  • yasui3

    CoolなデザインCSSをありがとう。
    「5. 光を放つグロー効果」でやってますが、PCのchromeとfirefox,safariではちゃんと表示されるのですが、IE10ではうまく表示されないです。なにがあるのでしょうか?

  • Pingback: 【1/28~2/3】先週のWebクリップ | キノめも()