CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで反転（Invert）効果を設定する方法

反転（Invert）効果とは

反転（Invert）効果は、オブジェクトの色を色スペクトル上の反対の値へマッピングするフィルターです。これにより、写真のネガのように色が反転した画像（ネガ画像）を作成することができます。

このフィルターで使用されるパラメータは以下のとおりです。

番号パラメータと説明
1
Invert
オブジェクトの色を、色スペクトル上の反対の値にマッピングします。

使用例

以下のコードを実行すると、反転効果の実装を試すことができます。

<html>
   <head>
   </head>
   <body>
      <img src = "/images/css.gif" alt = "CSS Logo" style = "Filter: invert" />
      <p>テキストの例：</p>
      <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black;
         color: red; Filter: invert">
         CSS Tutorials
      </div>
   </body>
</html>

この例では、画像とテキストの両方に Filter: invert を指定しているため、それぞれの色が反転して表示されます。

補足：モダンCSSでの反転指定

上記の Filter プロパティは、旧式（Internet Explorer向け）の記述方法です。現在のブラウザでは、標準の filter プロパティを使用し、filter: invert(100%); のように指定するのが一般的です。100%で完全な反転となり、50%を指定すると中間調（グレーに近い状態）になります。状況に応じて適切な記述方法を使い分けましょう。

  1. CSSで作るスイングアニメーション効果の実装方法

    スイング(Swing)アニメーションは、吊り下げられた要素や軸を中心とした要素を、前後・左右に揺らす動きを表現できるCSSアニメーション効果です。振り子のような自然な揺れを再現でき、ロゴやバナー、アイコンなどに注目を集める演出として活用できます。 スイングアニメーションの仕組み スイングアニメーションは、主に次のCSS機能を組み合わせて実装します。 transform-origin: top center; … 要素の上部中央を回転の基点に設定し、ぶら下がっているように見せる @keyframes と rotate() … 回転角度を15°→ -10°→ 5°→ -5°→ 0°と段階的に変化

  2. CSSでホバー効果の速度を設定する方法｜transition-durationの使い方を解説

    CSSでホバー（マウスオーバー）時のアニメーション速度を設定するには、transition-duration プロパティを使用します。ホバー時のスタイル変更は :hover セレクターで指定します。transition-durationと:hoverセレクターの役割transition-durationプロパティは、要素のスタイルが変化する際にかかる時間を秒（s）またはミリ秒（ms）単位で指定できます。例えば「2s」と設定すれば、色や枠線などの変化が2秒かけて滑らかに遷移します。このプロパティを元の要素側に記述し、変化後のスタイルを :hover セレクターで定義することで、自然なホバーアニメ