Webデザイン最新トレンド ~イマドキUIのつくりかた
第12回 ふわっと色が変わるボタンを作るには
CSS3+IE対策にJavaScriptを併用
hover時のボタンの処理でよく使われるのが以下のような手法です。
- ボタンの画像を2枚用意してJavaScriptで切り替える
- CSS spriteでhover時の位置をずらしたりする
しかし,
今回ご紹介するのは,
Windows
- Firefox 4.
03 ○ - Safari 5 ○
- Chrome 7 ○
- Opera 10.
63 ○ - IE 6 ×
- IE 7 ×
- IE 8 ×
Mac
- Firefox 3.
6 × - Safari 5 ○
- Chrome 7 ○
- Opera 10.
63 ○
そこで,
CSS3で実装するには
今回のサンプルの完成イメージは以下のとおりです。
まずはCSS3による実装方法です。
CSSのソース
a img {
-webkit-transition:opacity 0.25s; /*Safari,Chrome*/
-o-transition :opacity 0.25s; /*Opera*/
-moz-transition :opacity 0.25s; /*Firefox*/
transition :opacity 0.25s;
background:#fff;
}
a:hover img {
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}
ポイントは2つです。
1つ目は,
- -webkit-transition
(Safari/ Chrome用) - -o-transition
(Opera用) - -moz-transition
(mozilla系ブラウザ用)
「0.
2つ目は,
IEはtransitionによるアニメーションはしませんが,
そのために,
jQueryのfadeTo()メソッドで透過度を変化させる
次はJavaScriptを使った実装方法です。
JavaScriptソース
$(function() {
$('a img').hover(
function(){
$(this).fadeTo(250, 0.7);
},
function(){
$(this).fadeTo(250, 1);
}
);
});
ポイントは,
なお,
「Yahoo!
ただし,
今回解説したサンプルファイルがダウンロードできます。
バックナンバー
Webデザイン最新トレンド ~イマドキUIのつくりかた
関連記事
- 2021年11月第2週号 1位は,認知心理学がユーザーインターフェイス設計に重要な理由,気になるネタは,バルミューダ,開発中の5Gスマホの外観をチラ見せ 11月16日に発表へ
- 2021年10月第3週号 1位は,プロトタイプによってユーザーエクスペリエンスを最適化するヒント,気になるネタは,情報共有ツール「notion」日本語対応 日本ユーザー急増で
- 2021年10月第2週号 1位は,Figmaでのデザイン作業をスピードアップする方法,気になるネタは,InstagramがIGTVブランドを廃止,リール以外のビデオを「Instagram Video」フォーマットに統一
- 2021年9月第5週号 1位は,UXデザインのグローバル化についてのヒント,気になるネタは,米Slackが動画を簡単に作成・共有できる新機能などを発表
- 2021年9月第3週号 1位は,柔軟性のあるコンポーネントを作る方法,気になるネタは,Facebookのスマートグラス「Ray-Ban Stories」発売 299ドルから