filter：blur、brightness、contrast、grayscale
CSSのfilterプロパティ関数を使って、要素に写真風のフィルター効果を適用します。
「filter：blur、brightness、contrast、grayscale」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
CSSの filter プロパティ
filterプロパティは、実際の画像を編集せずに、Photoshopの調整レイヤーに似たグラフィック効果を要素に適用します。
filter: blur()
ガウスぼかしを適用します。引数はぼかしの半径です。
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
明るさを調整します。1は元の明るさ、0は黒、2は明るさが2倍であることを表します。
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
コントラストを調整します。1は元のコントラスト、0は均一なグレー、1より大きい値はコントラストの増加を表します。
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
グレースケールに変換します。0は完全なカラー、1（または100%）は完全なグレーを表します。
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
色の彩度を調整します。0はグレー、1は元の彩度、1より大きい値は鮮やかな色を表します。
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
指定した角度だけ色相環を回転させ、色相環上ですべての色を移動させます。
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
暖かみのあるビンテージ風のセピア調を適用します。0は元の色、1は完全なセピア調を表します。
<div class="vintage"></div>
filter: drop-shadow()
box-shadowに似ていますが、透明な領域を含め、要素の実際の描画形状に沿って影を付けます。不規則な形状のPNG画像に適しています。
<div class="icon">★</div>
複数のフィルターの組み合わせ
複数のfilter関数をスペースで区切って連結します。フィルターは左から右の順に適用されます。
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filterによるスタッキングコンテキストの作成
要素にfilterを適用すると、新しいスタッキングコンテキストが作成されます。そのため、子要素のposition: fixedがposition: absoluteのように動作することがあります。これはよくあるバグです。
確認問題
要素にガウスぼかしを適用するCSSのfilter関数はどれですか。
まとめ
filterプロパティは、blur()、brightness()、contrast()、grayscale()、saturate()、hue-rotate()、sepia()、drop-shadow()による写真調整を適用します。複数の関数はスペースで区切って連結します。filterはスタッキングコンテキストを作成するため、固定位置の子要素に影響する場合があることを覚えておいてください。
よくある質問
「filter：blur、brightness、contrast、grayscale」レッスンは無料ですか？
はい。「filter：blur、brightness、contrast、grayscale」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「filter：blur、brightness、contrast、grayscale」で何を学びますか？
CSSのfilterプロパティ関数を使って、要素に写真風のフィルター効果を適用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「filter：blur、brightness、contrast、grayscale」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- filter：blur、brightness、contrast、grayscale
- すりガラス効果のためのbackdrop-filter
- レイヤー合成のためのmix-blend-mode
- isolationプロパティ