ホームプログラミング言語 Web関連 css3 詳細CSSフィルター（フィルター）

詳細CSSフィルター（フィルター）

フィルターといえば、真っ先に思い浮かぶのは、PhotoShop などの描画ソフトで、写真を美しくすることができます。 CSS では、ぼかし効果、透明効果、色のコントラスト調整、色の反転など、さまざまな種類のフィルター効果をソフトウェアなしで実現できます。さらに、Web ページの要素またはビデオは、CSS のフィルターを介して処理できます。このセクションでは、CSS でのフィルターの使用について学習します。

以下に示すように、CSS のフィルター効果は、filter 属性といくつかの関数によって実現する必要があります。

フィルター	説明
none	デフォルト値は効果がないことを意味します
blur(px)	画像にガウスぼかしを設定します。デフォルト値は 0、単位はピクセルで、値が大きいほどぼやけます
brightness(%)	画像の明るさを調整します。デフォルト値は 100% で、元の画像を表します。0% は明るさがないことを意味し、画像は完全に黒くなります。値が 100% を超えると、画像は明るくなります。
contrast(%)	画像のコントラストを調整します。デフォルト値は 100% で、元の画像を表します。0% は画像を完全に黒くします。値が 100% を超えると、画像のコントラストが高くなります。
drop-shadow(h-shadow v-shadow blur spread color)	画像に影の効果を追加します。パラメータは次のとおりです。 h-shadow: 必須の値で、水平方向の影のピクセル値を指定します。値が負の場合、影は画像の左側に表示されます。 v-shadow: 必須の値で、垂直方向の影のピクセル値を指定します。値が負の場合、影は画像の上に表示されます。 blur: オプションの値、影にぼかし効果を追加します。デフォルト値は 0、単位はピクセル、値が大きいほどぼかしが多く作成されます (影が大きく明るくなります)、負の値は禁じられている; スプレッド: オプションの値。デフォルト値は 0 で、単位はピクセルです。値が正の場合、影は拡大して成長し、値が負の場合、影は縮小します。 color: オプションの値。影に色を追加します。指定しない場合、ブラウザによって絶対色になります。通常は黒です。注: Chrome、Safari、Opera などのブラウザーは 4 番目のパラメーターをサポートしていないため、追加しても効果はありません。
grayscale(%)	イメージをグレースケールイメージに変換します。デフォルト値は 0% で、元のイメージを意味します。100% は、イメージが完全にグレースケールイメージ (つまり、白黒イメージ) に変換されることを意味します。負の値は、禁じられている
hue-rotate(deg)	イメージに色相回転を適用します。この値は、カラーリングの次数を定義するために使用されます。デフォルト値は元のイメージを表す 0deg で、最大値は 360deg です。
invert(%)	画像を反転します。デフォルト値は 0% で、元の画像を意味します; 100% は完全に反転したことを意味し、負の値は許可されていません
opacity(%)	画像の不透明度を設定します。デフォルト値は 100% で、元の画像を意味します。0% は完全に透明であることを意味し、負の値は許可されていません
saturate(%)	画像の彩度を設定します。デフォルト値は 100% で、元の画像を意味します。0% は画像が完全に彩度が低いことを意味し、負の値は許可されません
sepia(%)	画像をセピアに変換します。デフォルト値は 0% で、元の画像を意味します。100% は画像が完全にセピアに変換されていることを意味し、負の値は許可されていません
url()	url() 関数は、SVG フィルターが設定されている XML ファイルを指定するために使用され、特定のフィルター要素を指定するためのアンカーポイントを含めることができます
initial	プロパティをデフォルト値に設定します
inherit	この属性の値を親要素から継承します

ヒント: これらの CSS 関数のパラメーター値は、基本的に 0 ~ 1 (0% ~ 100%) の間ですが、blur() 関数のパラメーター値がピクセル単位であるなど、いくつかの例外があります。 -rotate() 関数のパラメータ値の単位は「deg」です。

[例] CSS でフィルターを使用する例を次に示します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            position: relative;
        }
        div span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-shadow: 1px 1px 2px black;
        }
        img {
            width: 100%;
        }
        div img.ぼかし {
            filter: blur(4px);
        }
        div img.輝度 {
            filter: brightness(250%);
        }
        div img.コントラスト {
            filter: contrast(180%);
        }
        div img.グレースケール {
            filter: grayscale(100%);
        }
        div img.色相回転 {
            filter: hue-rotate(180deg);
        }
        div img.反転 {
            filter: invert(100%);
        }
        div img.透明度 {
            filter: opacity(50%);
        }
        div img.飽和度 {
            filter: saturate(7);
        }
        div img.セピア {
            filter: sepia(100%);
        }
        div img.ドロップシャドウ {
            filter: drop-shadow(8px 8px 10px green);
        }
    </style>
</head>
<body>
    <div><img src="./tulip.jpg" alt="チューリップ">                   <span>原始画像</span></div>
    <div><img class="ぼかし" src="./tulip.jpg" alt="チューリップ">      <span>blur(4px)</span></div>
    <div><img class="輝度" src="./tulip.jpg" alt="チューリップ"><span>brightness(250%)</span></div>
    <div><img class="コントラスト" src="./tulip.jpg" alt="チューリップ">  <span>contrast(180%)</span></div>
    <div><img class="グレースケール" src="./tulip.jpg" alt="チューリップ"> <span>grayscale(100%)</span></div>
    <div><img class="色相回転" src="./tulip.jpg" alt="チューリップ"> <span>hue-rotate(180deg)</span></div>
    <div><img class="反転" src="./tulip.jpg" alt="チューリップ">    <span>invert(100%)</span></div>
    <div><img class="透明度" src="./tulip.jpg" alt="チューリップ">   <span>opacity(50%)</span></div>
    <div><img class="飽和度" src="./tulip.jpg" alt="チューリップ">  <span>saturate(7)</span></div>
    <div><img class="セピア" src="./tulip.jpg" alt="チューリップ">     <span>sepia(100%)</span></div>
    <div><img class="ドロップシャドウ" src="./tulip.jpg" alt="チューリップ">    <span>drop-shadow(8px 8px 10px green)</span></div>
</body>
</html>

実行結果は次の図のとおりです。

さらに、同じ要素に対して複数のフィルター効果を使用することもできます。各フィルター関数をスペースで区切るだけで済みます。サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            position: relative;
        }
        div span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-shadow: 1px 1px 2px black;
        }
        img {
            width: 100%;
            filter: sepia(90%) saturate(400%) brightness(150%);
        }
    </style>
</head>
<body>
    <div><img src="./tulip.jpg" alt="チューリップ"><span>セピア（90％）色鮮やかさ（400％）明るさ（150％）</span></div>
</body>
</html>

実行結果は次の図のとおりです。

注: 複数のフィルター効果を組み合わせて使用する場合は、使用順序に特に注意してください。そうしないと、たとえば、grayscale() を使用した後に sepia() を使用すると、完全なグレースケールイメージが生成されるなど、予期しない効果が発生します。

画像だけでなく、テキスト、ビデオなど、あらゆる HTML 要素にフィルター効果を使用できます。フィルターによって美化することができます。サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            filter: blur(2px) contrast(50%) brightness(80%);
        }
    </style>
</head>
<body>
    <div>フィルターに関して話すと、多くの人々は最初に PhotoShop のようなグラフィックデザインソフトウェアを思い浮かべるかもしれません。このようなソフトウェアのフィルターを使って、画像を美化することができます。しかし、CSS では、ソフトウェアなしでもさまざまなフィルター効果を実現することができます。例えば、ぼかし効果、透明効果、色の対比の調整、色の反転などです。また、CSS のフィルター機能を使うことで、Web ページ上の要素やビデオを処理することができます。</div>
</body>
</html>

実行結果は次の図のとおりです。

ヒント: IE ブラウザーはフィルター属性をサポートしていません

「詳細CSSフィルター（フィルター）」についてわかりやすく解説！絶対に観るべきベスト2動画

My filter() method

https://www.youtube-nocookie.com/watch?v=eRM7ekb1iQU&pp=ygUz6Kmz57SwQ1NT44OV44Kj44Or44K_44O877yI44OV44Kj44Or44K_44O877yJJmhsPUpB

Xây dựng phương thức filter | JavaScript Array filter() method (https://www.youtube-nocookie.com/watch?v=eRM7ekb1iQU&pp=ygUz6Kmz57SwQ1NT44OV44Kj44Or44K_44O877yI44OV44Kj44Or44K_44O877yJJmhsPUpB)

css3