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

CSSでグレースケール効果を設定する方法

グレースケール効果とは

グレースケール効果は、オブジェクト（画像やテキストなど）の色を256階調のグレーに変換するフィルターです。カラーの要素をモノクロ風に表示したい場合に活用できます。

パラメータ

パラメータ説明
Grayオブジェクトの色を256階調のグレーに変換します。

使用例

以下のコードを実行すると、画像とテキストにグレースケール効果を適用できます。

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

注意点：モダンブラウザでの代替方法

上記の Filter: Gray はInternet Explorer専用の独自拡張であり、現在では非推奨となっています。モダンブラウザでは、CSS標準の filter プロパティを使って同じ効果を実現できます。

img {
  filter: grayscale(100%);
}

grayscale() 関数には0%〜100%の値を指定でき、100%で完全なグレースケールになります。50%を指定すれば半分だけ色を落とした中間的な表現も可能です。この方法はChrome、Firefox、Safari、Edgeなどすべての主要ブラウザでサポートされているため、新規の開発ではこちらの利用を推奨します。

  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 セレクターで定義することで、自然なホバーアニメ