リンクや画像をマウスホバーの際にゆっくり変化させるCCSのみで最短の方法

2018-10-29
マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。 BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。 さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。 まずはclassにtransition(切り替える時間)を指定します。 hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。 htmlStart .hover-slow{ transition: 0.5s;} .hover-slow:hover{ opacity:0.7;} htmlEnd あとは、ホバー時に変化させたい画像やリンクの...続きを見る
カテゴリ: CSS

ボタンを押したらローディング画面を表示する

2013-04-30
更新 2018-11-26 この記事に関する最新記事は「ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)」になります。 管理画面で時間のかかる処理(例えば画像や動画などをアップロードする際)をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹...続きを見る

Opacityをほとんどのブラウザで使えるようにする

2012-08-22
ロールオーバー用の画像を作るのが面倒な場合に活躍するオパシティー。 htmlStart a:hover img{ filter:alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; } htmlEnd 数値は「0~100」「0~1」までの間で、数値が低いほど透明度が強くなります。なので、0にすると画像は見えなくなります。...続きを見る
  • 関連タグ:
カテゴリ: CSS