CSS フィルターでできること: ぼかし、ドロップシャドウ、色相回転、もっと知りたい？

ぼかしフィルター

• blur(値): ぼかし効果を適用します。値はピクセル単位で指定し、ぼかしの強さを決定します。

例：

.image {
  filter: blur(5px);
}

このコードは、image クラスを持つ要素に 5 ピクセルのぼかし効果を適用します。

• blur() 関数は、複数の値を受け取って、方向とぼかしの強さを制御することもできます。

.image {
  filter: blur(5px 10px, 2px 5px);
}

このコードは、image クラスを持つ要素に水平方向に 5 ピクセル、垂直方向に 10 ピクセルのぼかし効果を適用し、さらにそのぼかし効果をぼかすという2段階のぼかし効果を適用します。

ドロップシャドウフィルター

• drop-shadow(オフセットX オフセットY ぼかし半径 色): 要素にドロップシャドウ効果を適用します。

.text {
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.5));
}

このコードは、text クラスを持つ要素に、右下方向に 2 ピクセル、下方向に 3 ピクセルオフセットされた、半径 5 ピクセルの黒いドロップシャドウを適用します。

色相回転フィルター

• hue-rotate(角度): 要素の色相を回転させます。角度は度数で指定し、色の回転方向と量を決定します。

.image {
  filter: hue-rotate(90deg);
}

このコードは、image クラスを持つ要素の色相を 90 度回転させ、元の色が青の場合、緑に変換します。

サチュレーションフィルター

• saturate(値): 要素の色彩を飽和させます。値は 0 から 1 の間の小数で指定し、色の鮮やかさを決定します。0 はモノクロ、1 は元の彩度を保ちます。

.image {
  filter: saturate(2);
}

このコードは、image クラスを持つ要素の色彩を 2 倍に飽和させ、より鮮やかで活気のある色にします。

コンтраストフィルター

• contrast(値): 要素のコントラストを調整します。値は 0 から 1 の間の小数で指定し、明暗の差を決定します。0 は白黒、1 は元のコントラストを保ちます。

.image {
  filter: contrast(1.5);
}

このコードは、image クラスを持つ要素のコントラストを 1.5 倍に調整し、明暗の差を強調します。

ブライトネスフィルター

• brightness(値): 要素の明るさを調整します。値は 0 から 1 の間の小数で指定し、全体の明るさを決定します。0 は黒、1 は元の明るさを保ちます。

.image {
  filter: brightness(0.7);
}

このコードは、image クラスを持つ要素の明るさを 0.7 倍に調整し、全体的に暗くなります。

インバートフィルター

• invert() : 要素の色を反転します。白は黒になり、黒は白になります。

.image {
  filter: invert();
}

このコードは、image クラスを持つ要素の色を反転し、白黒写真のような効果にします。

• opacity(値): 要素の不透明度を調整します。値は 0 から 1 の間の小数で指定し、要素の透過度を決定します。0 は完全に透明、1 は完全に不透明になります。

.image {
  filter: opacity(0.5);
}

---

.blurred-image {
  filter: blur(5px); /* 5 ピクセルのぼかし効果 */
}

.multi-directional-blur {
  filter: blur(5px 10px, 2px 5px); /* 2段階のぼかし効果 */
}

ドロップシャドウフィルター

.shadowed-text {
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.5)); /* 黒いドロップシャドウ */
}

.colored-shadow {
  filter: drop-shadow(2px 3px 5px rgba(255, 0, 0, 0.5)); /* 赤いドロップシャドウ */
}

色相回転フィルター

.rotated-image {
  filter: hue-rotate(90deg); /* 色相を 90 度回転 */
}

.blue-to-green {
  filter: hue-rotate(180deg); /* 青色を緑色に変換 */
}

サチュレーションフィルター

.saturated-image {
  filter: saturate(2); /* 色彩を 2 倍に飽和 */
}

.desaturated-image {
  filter: saturate(0.5); /* 色彩を半分に減衰 */
}

コントラストフィルター

.high-contrast {
  filter: contrast(1.5); /* コントラストを 1.5 倍に調整 */
}

.low-contrast {
  filter: contrast(0.5); /* コントラストを半分に減衰 */
}

ブライトネスフィルター

.bright-image {
  filter: brightness(1.2); /* 明るさを 1.2 倍に調整 */
}

.dark-image {
  filter: brightness(0.7); /* 明るさを 0.7 倍に調整 */
}

インバートフィルター

.inverted-image {
  filter: invert(); /* 色を反転 */
}

オパシティフィルター

.translucent-image {
  filter: opacity(0.5); /* 不透明度を 50% に設定 */
}

.transparent-text {
  filter: opacity(0); /* 完全に見えなくなる */
}

.filtered-image {
  filter: blur(2px) hue-rotate(45deg) saturate(1.5) contrast(0.8) brightness(1.1); /* 複数のフィルターを連結 */
}

• ブラウザによっては、すべてのフィルターがサポートされているわけではないことに注意してください。
• 多くの場合、これらのフィルターはパフォーマンスに影響を与える可能性があります。特に、高解像度の画像や複雑なフィルターを使用する場合は注意が必要です。

---

CSS グラデーション

• グラデーションを使用して、要素に滑らかな色の移行効果を作成できます。方向、色、位置を自由に設定できます。

.gradient-text {
  background: linear-gradient(to right, red, orange, yellow);
}

このコードは、text クラスを持つ要素に、左から右へ赤、オレンジ、黄色のグラデーション背景を設定します。

CSS ボックスシャドウ

• ボックスシャドウを使用して、要素の周囲に影や境界線を追加できます。影の色、ぼかし、オフセットを自由に設定できます。

.shadowed-box {
  box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.5);
}

このコードは、shadowed-box クラスを持つ要素に、右下方向に 5 ピクセル、下方向に 10 ピクセルオフセットされた、半径 15 ピクセルの黒い影を適用します。

CSS マスク

• マスクを使用して、要素の一部のみを表示したり、他の要素と切り抜いたりできます。画像や SVG をマスクとして使用できます。

.masked-image {
  mask: url('mask.png') repeat;
}

このコードは、masked-image クラスを持つ要素に mask.png 画像をマスクとして適用し、画像の形に切り抜きます。

CSS 変換

• 変換を使用して、要素を回転、スケーリング、移動したり、3D 効果を適用したりできます。

.rotated-image {
  transform: rotate(45deg);
}

.scaled-image {
  transform: scale(0.5, 0.5);
}

これらの方法はほんの一例です。CSS は、クリエイティブなエフェクトを作成するための非常に強力なツールです。

• 最新の情報については、MDN Web Docs の CSS に関するリファレンスを参照してください。
• 複雑なエフェクトを作成する場合は、組み合わせることもできます。
• 上記の方法は、CSS フィルターよりもパフォーマンス効率が優れている場合があります。

• SVG を使用して、動的に形状やアニメーションを作成できます。
• Canvas API を使用して、要素に直接描画したり、画像を操作したりできます。