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

CSSで色深度をフラット化する方法｜X-Rayフィルタの基本とサンプルコード

CSSで要素の色深度をフラット化するには、「X-Ray（X線）」フィルタを使用します。このフィルタを適用すると、対象の画像やテキストがグレースケール化され、X線写真のようなモノクロ調に変換されると同時に、色深度が平坦化されます。

X-Rayフィルタのパラメータ

X-Rayフィルタでは、以下のパラメータが使用されます。

番号パラメータと説明
1 Xray
要素をグレースケール化し、色深度をフラット化します。

実装例

以下のコードを実行すると、画像とテキストにX-Rayエフェクトを適用できます。

<html>
<head>
</head>
<body>

   <img src = "/css/images/logo.png" alt = "CSS Logo" style = "Filter: Xray">

   <p>テキストの例：</p>

   <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red;">CSS Tutorials</div>

</body>
</html>

注意点：ブラウザ互換性について

Xrayフィルタは、かつてInternet Explorerで利用されていた独自拡張（DXImageTransform）に属するレガシー機能です。そのため、Chrome・Firefox・Edge・Safariなどの現行の標準ブラウザでは動作しない点に注意してください。

現在のブラウザで同様のグレースケール効果を実現したい場合は、標準化されたfilterプロパティを使用するのが推奨されます。例えば、次のように記述します。

img {
   filter: grayscale(100%);
}

このように記述することで、モダンブラウザ環境でも色味を失ったフラットな表示を簡単に実装できます。

  1. CSSでキャレット（カーソル）の色を指定する方法｜caret-colorプロパティの使い方

    テキスト入力時に表示されるキャレット（挿入位置を示す縦棒カーソル）の色を変更したい場合は、CSSの caret-color プロパティを使用します。このプロパティを使えば、<input> や <textarea> などの編集可能な要素におけるカーソルの色を自由にカスタマイズできます。 caret-colorプロパティの基本的な使い方 caret-color プロパティには、キーワード・16進数・RGB・HSLなど、任意のCSSカラー値を指定できます。以下は、入力欄のキャレットを青色に設定するシンプルな例です。 サンプルコード <!DOCTYPE html>

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1