ヘッダー・コニファロゴお問い合わせ営業日カレンダーサイトマップコニファHOME
コニファ:ツール紹介やプログラム集・CSSでロールオーバー(3)
HOME > ツール集トップ > CSSでロールオーバー(3)


CSSでロールオーバー(3)

●Javascriptを使わず、CSSと画像だけで動作するロールオーバーのテストページ その(3)
このページでは、アルファチャンネル・透過PNG画像を使ったcssロールオーバーのサンプルを表示しています。
コニファのサイト内では、この他にもいろいろなCSSロールオーバーを使用しています。
CSSロールオーバー(1)従来からのロールオーバー
CSSロールオーバー(2)アニメーションgifを利用したロールオーバー



◯透過PNG画像を使ったcssロールオーバーのサンプル(CSSスプライト)

上下に2つの画像を配置した半透明のPNG画像(上の右端)を、色を付けた横80px、縦30pxのブロックの背景に指定して、
.button1 a { display: block; width: 80px; height: 30px; …
background: #4a4a4a url(../img/button.png) no-repeat 0 0; }

オンマウス時(フォーカス、アクティブも同じ)にポジションを縦方向に40pxずらしています。
.button1 a:hover, .button1 a:focus, .button1 a:active { background-position: 0 -40px; }

PNG画像は1枚だけで、バックグラウンドの色を変えて使い回すことができます。横サイズは固定です。
赤いボタンと青いボタンは、オンマウス時の文字色も変えています。






 

戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.