ウェブデザイナーは、CSS3が現れたときに作成していたページをもっと制御したいと望んでいました。 CSS3で導入された新しいスタイルは、Web専門家にPhotoshopのような効果をページに追加する機能を与えました。これには、ドロップシャドウやグロー、丸みのあるコーナーなどのプロパティが含まれていました。 CSS3では、アニメーションのようなエフェクトも導入されており、サイトでのインタラクティブ性を高めることができます。
CSS3を使用してウェブサイト内の要素に追加できるビジュアルエフェクトは、不透明度とトランジションのプロパティの組み合わせを使用してフェードイン/フェードインさせることです。これは、サイト訪問者がその要素の上にホバーするような何かをしたときに焦点が合っている退色領域を作成することによって、ページをよりインタラクティブにする簡単で十分サポートされた方法です。
この相互作用するビジュアルエフェクトをWebページのさまざまな要素に追加するのがどれほど簡単かを見てみましょう。
ホバーの不透明度を変更する
まず、顧客がその要素にマウスを乗せたときに、画像の不透明度を変更する方法を見ていきます。この例では（HTMLを下に示します）、class属性の画像を使用しています
グライドアウト。
グレー表示にするために、CSSスタイルシートに次のスタイルルールを追加します。 .greydout {-webkit-opacity：0.25;-moz-opacity：0.25;不透明度：0.25;}
これらの不透明度設定は25％に変換されます。これは、画像が通常の透明度の1/4で表示されることを意味します。完全に透過的であるのに対して、透明でない完全に不透明は100％であり、0％は完全に透明である。 次に、マウスを上に置いたときに画像を透明に（またはより正確には完全に不透明に）するには、 ：ホバー疑似クラス：.greydout：hover {-webkit-opacity：1;-moz-opacity：1;不透明度：1;}
これらの例では、ベンダーのプレフィックス付きバージョンのルールを使用して、これらのブラウザーの旧バージョンとの下位互換性を保証しています。これは良い習慣ですが、現実には、不透明度の規則がブラウザでうまくサポートされており、これらのベンダーのプレフィックス行を削除することはかなり安全です。それでも、古いブラウザのバージョンを確実にサポートしたい場合は、これらの接頭辞を含めない理由もありません。宣言を通常の接頭辞なしのスタイルで終了させるという、受け入れられているベストプラクティスに必ず従ってください。 これをサイトに展開した場合、この不透明度の調整は非常に急激な変化であることがわかります。まず、灰色で、それ以外は暫定状態ではありません。これはライトスイッチのようなものです。オンまたはオフです。これはあなたが望むものかもしれませんが、より緩やかな変化を実験したいかもしれません。 本当に素晴らしいエフェクトを追加し、このフェードを段階的にするには、 遷移
プロパティを .greydoutクラス：.greydout {-webkit-opacity：0.25;-moz-opacity：0.25;不透明度：0.25;-webkit-transition：すべての3秒間の操作が簡単です。-moz-transition：すべての3秒が楽になる。-ms-transition：すべての3秒が簡単です。-o-transition：すべての3秒が楽になる。トランジション：すべての3秒を楽にする。}
