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

コピペでできる！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.

http://www.webcreatorbox.com/tech/css3-text-link/