CSSで「ぼかす」使えるFilterの基本解説

CSSのfilterプロパティは、HTML要素に画像処理を適用するための機能を提供します。ボカシ、明るさ調整、色見、転逆など様々なビジュアルエフェクトを実現できます。以下では、filterの基本と使い方を解説します。

基本構文

filter: <filter-function> [<filter-function> ...];

複数のフィルターを結合して適用することが可能です。各フィルターは、置換の980項目に対して順番に適用されます。

主なフィルターの一覧

1. blur()

画像をボカします。引数は、ボカシ度を指定するピクセル値。

filter: blur(5px);

2. brightness()

明るさを調整します。0 (暗くする) から 1 (素の明るさ) 以上まで指定可能です。

filter: brightness(1.5);

3. contrast()

コントラストを調整します。0 (一色)から 1 (素のコントラスト)、それ以上も可能です。

filter: contrast(2);

4. grayscale()

色をグレースケールに変換します。0% から 100% まで指定可能。

filter: grayscale(100%);

5. hue-rotate()

色相を旋回させます。角度で指定し、値は0degから約1周しの360degまで。

filter: hue-rotate(90deg);

6. invert()

色を転逆します。0% (ションのまま) から 100% (全て転逆) まで指定可能。

filter: invert(100%);

7. opacity()

透明度を調整します。0% (透明)から 100% (完全に透明不可)まで。

filter: opacity(50%);

8. saturate()

色合を調整します。0% (モノクローム)から 100% (素の色合)、それ以上も可能です。

filter: saturate(200%);

9. sepia()

色をセピア色に変換します。0% から 100% まで指定可能。

filter: sepia(100%);

10. drop-shadow()

ドロップシャドウを適用します。シャドウの位置、色、傾きなどを指定可能。

filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));

Filterの例え使用例

イメージをボカして透明さを変更

<img src="example.jpg" class="filtered-image">

.filtered-image {
  filter: blur(5px) opacity(80%);
}

ファンシーな色合調整

<div class="colorful-box">カラーフルなボックス</div>

.colorful-box {
  width: 200px;
  height: 200px;
  background-color: blue;
  filter: saturate(200%) brightness(1.2);
}

パフォーマンス上の注意点

1. 表示速度: filterはグラフィックスレーヤーで処理されるため、要素が大きい場合はパフォーマンスに影響する可能性があります。
2. ブラウザ互換性: 主要なブラウザでサポートされていますが、従来のブラウザでは一部のフィルターが効かない場合もあります。
3. 結合による効果変化: 複数のフィルターを結合すると、意図しない効果が起こる可能性があります。これを避けるために一次づつ確認してください。

CSSのfilterは簡単な構文で、高度なビジュアルエフェクトを実現できる魅力的な機能です。この基本を理解し、ウェブデザインに活用してください。