web関係、制作関係でのよしなしごとを書いています。
2011/7/14 コードの最適化、半透明(50%サンプル)追加
フォームのボタンに画像を設定する時に使うtype="image"ですが、このままではロールオーバーをつけることができません。そのためJavaScriptのonmouseover="this .src='画像パス'" onmouseout="this .src='画像パス'"やyuga.jsなどのjsライブラリを使うことになります。
しかしCSSを工夫することによりロールオーバーが可能になります。この方法ではinputを囲むブロック要素が必要になってしまいますが、大抵の場合はinputをブロック要素で囲んでいるので特に問題にはならないでしょう。
まずinputをブロック要素で囲みます。そこに背景画像を入れ、inputの真下に来るように調整します。
次にinputが:hoverの時にalphaでinputが消えるように透明度を調整します。また、a以外の:hoverにIE6は対応していないのでliにcsshover3を読み込むように指定します。
alphaは「疑似クラス:hoverを使ったロールオーバー」に、csshover3は「CSSで作るプルダウンメニュー」に詳しく載っています。
ul li{
background:url(button_bg.png) no-repeat left top;
}
input{
behavior: url("/csshover3.htc");
}
input :hover{
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
opacity: 0.0;
}
<ul>
<li><input type="image" src="button.png" /></li>
</ul>
また、完全に色が変わるのではなく色を薄めて光ったような効果を出す場合は背景画像が不要になるのでより簡単にできます。
input{
behavior: url("/csshover3.htc");
}
input :hover{
filter: alpha(opacity=50);
-ms-filter: alpha(opacity=50);
opacity: 0.5;
}
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)