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

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

文字や画像をCSSのみで半透明にする方法 マウスオーバーに使うと面白い このエントリーを含むはてなブックマーク

css.png
今回はクロスブラウザ上で実現する透明化についてです。なんのこっちゃ??

マウスオーバーを楽しむ 半透明にするだけでクリック率激増!?


CSSはこんな感じになります。クロスブラウザ対応です。
filter: alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;

クロスブラウザ対応させるために3行それぞれ書いています。数字部分が透過率を意味しており、ここをいじると半透明になる具合もかわってきます。
僕の場合はよくマウスオーバーに動きを出すのに使っています。たとえばこんな感じで使えます。
hanntoumei1.gif
画像リンク

hanntoumei2.gif
マウスオーバー時に画像を半透明にする


具体的に。CSSで解説します。
HTMLはこんな感じ
<div class = "entry_more">          
<a href="<%topentry_link>#more"><img src="http://blog-imgs-44.fc2.com/y/u/k/yukinolab/readmore.png"></a>
</div><!-- entry_more -->


クラス名entry_moreのCSS
.entry_more a:link, .entry_more a:visited {

}

.entry_more a:active, .entry_more a:hover {
text-decoration:none;
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
}


a:hoverというのがマウスオーバー時に適用されるスタイルシートになるので、ここに半透明化CSSを使っています。これでマウスオーバー時に簡単に動きを出すことができるんです。

簡単でしょ?

イメージを右クリックして画像を保存してください


こちらはどうぞご自由にお使いください。透明化されているので背景色問わずに使えますですよ。
ただし直リンクはやめてね。画像をいったんダウンロードして、ご自分のfc2ブログ管理画面からアップロードして使ってください。
COMMENT
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。