はじめまして、カンマン新人Webデザイナーのtkmです。
私は他業種から転職し、Webデザイナーとしての実務は未経験で日々勉強をしながら業務をしております。
今後のために自分が学んだことの整理や参考にしたい情報等をアウトプットしていきたいと思います。
今回はCSSを使ったホバー時の設定について。
Webサイトではマウスをリンクが貼ってあるところに持っていくとテキストの色が変わったり、画像が変わったりとリンクしているということを分かりやすくしています。
それにはjavascriptやCSSを使ってホバー時の動きを設定しています。
まず、そのうちのCSSを使う基本のプロセスについては
こちらをご覧ください。
それを踏まえて、例えば画像の透明度を変えて分かりやすくする場合、CSSの設定はこのようにします。
a img {
overflow: hidden;
}
a:hover img
{
opacity:0.5;/Safari,Opera/
filter: alpha(opacity=50);/IE/
-moz-opacity: 0.5;/Firefox/
-ms-filter: “alpha( opacity=50 )”;/* IE 8 */
}
これは一例に過ぎませんが、こういったホバー時の設定に何を使うのかを選ぶこともデザインのひとつであると教わったので、調べていたらこんな情報を見つけました。
・[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
javascriptを使わなくてもこれだけ動的なエフェクトができるとのことなので、今後使ってみたいですね。
