スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSのみでマウスオーバーでふわっと表示させるテクニック!文字もできるよ このエントリーを含むはてなブックマーク

css.png
CSSのみでリンク文字などのマウスオーバーをふわっと表示させるテクニックです。CSS3のみ。

マウスオーバーがなんだか楽しくなる

マウスオーバーをふわっとさせるjQueryというのは結構いろいろとあるのですが、CSS3だけでも同じようなことが可能です。しかも文字も可能なのでかなーり実用的なテクニックなので使ってみてください。

CSS例
#entry a:link, #entry a:visited{color:#333;
-moz-transition: all 0.2s linear 0;
-webkit-transition: all 0.2s linear 0;}

#entry a:hover, #entry a:active{color:#333;text-decoration:none;
filter: alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;}

いちおークロスブラウザに対応するように表記していますが、CSS3のみです。

僕もなんでこれでふわっとなるのかよくわかんないのですが、どっかで見かけて真似してアレンジしたらできちゃいました。
hover, active(マウスオーバー、クリック時)側を透過させることでまるでふわっとフェードアウトするかのような演出になってくれます。文字や画像なんでもいけます。めっちゃ便利です。

たとえばh1タグのブログ名なんかも同じようにできちゃいます。
HTML例
<h1><a href="./"><%blog_name></a></h1>

CSS例
h1 a:link, h1 a:visited {
color:#333;text-decoration:none;-moz-transition: all 0.2s linear 0;-webkit-transition: all 0.2s linear 0;}
h1 a:hover, h1 a:active {
color:#bbb;
text-decoration: none;
}


CSSをちょっといじるだけなので導入もしやすいです。
個人的にはマウスオーバーをアレンジすることでクリックされる率も上がるんじゃないかという気がします。
この方法ならいちいちClass指定とかしなくても勝手にふわっとさせてくれるので、運用上も特に問題ないっす。
COMMENT
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。