CSSどのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。transitionプロパティは、時間の変化を操作するもので、今まではマウスオーバーするとパッと色が変わっていたところを、ふわっと色を変えたり、ぼよーんと角度を変えたりする際の「ふわっ」「ぼよーん」を再現してくれます。あれ、なんだか説明が変...。以下のサイトで詳しく知ることができます。アシアルブログベンダープレフィックス紹介しているサンプルを見ると、似たようなプロパティーがいくつも並んでるのがわかるかと思います。いった、プロパティの先頭についているものはベンダープレフィックスと呼ばれ、正式にはまだCSS3として採用されていないプロパティを、各ブラウザーに対応させるためにプロパティの先頭につけます。プロパティをはじめ、いくつかのプロパティはすでにベンダープレフィックスなしで動作します。participate(英語)」のオレンジ色のものはまだベンダープレフィックスを必要とするプロパティです。ベンダープレフィックスの要不要に迷ったら、一度チェックしておきましょう。Chrome、Safari、Firefox、Operaで動作します。IE9ではふんわり効果以外それとなく対応。Chrome、Safariのみ対応。プロパティでふんわりとさせることができます。背景色をふんわり変える文字色と同様に、背景色もふんわりと。ボタン扱いのリンクでも使える技ですね。文字をぼかすことができます。数値を変更してぼかし具合を調整可。光っているように表示します。背景を角丸にこちらもボタン扱いのリンクに使えそうな効果。テキストリンクに背景色をつけると、デフォルトでは四角に表示されますが、こちらを角丸に変化させることができます。テキストに合わせてくりぬく方法。今のところChrome、Safariのみ対応しています。対応していないブラウザーでは背景色がレインボーカラーになります。プロパティが使えるようにします。