Science Knowings: CSS Course For Social Media

CSS Image Effects

CSS Image Effects!!

We've covered CSS Text Effects. Now, let's dive into CSS Image Effects!

What are CSS Image Effects?

CSS Image Effects allow you to apply visual effects to images on your web pages using CSS properties.

Why use CSS Image Effects?

With CSS Image Effects, you can:
• Enhance the visual appeal of your images.
• Create visually appealing effects without using external tools.

Blur Effects

The filter: blur() property blurs an image.


img {
  filter: blur(5px);
}

Brightness Effects

The filter: brightness() property adjusts the brightness of an image.


img {
  filter: brightness(150%);
}

Contrast Effects

The filter: contrast() property adjusts the contrast of an image.


img {
  filter: contrast(150%);
}

Hue-Rotate Effects

The filter: hue-rotate() property rotates the hue of an image.


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

Grayscale Effects

The filter: grayscale() property converts an image to grayscale.


img {
  filter: grayscale(100%);
}

Sepia Effects

The filter: sepia() property applies a sepia tone to an image.


img {
  filter: sepia(100%);
}

Invert Effects

The filter: invert() property inverts the colors of an image.


img {
  filter: invert(100%);
}

Saturate Effects

The filter: saturate() property adjusts the saturation of an image.


img {
  filter: saturate(200%);
}

Drop-Shadow Effects

The filter: drop-shadow() property adds a drop shadow to an image.


img {
  filter: drop-shadow(5px 5px 5px #000);
}

CSS Image Effects Summary

In summary, CSS Image Effects offer a range of options to enhance and manipulate images on your web pages. By understanding these effects, you can create visually appealing and engaging designs.

Next Up: CSS Navigation Menus

Up next, we'll explore CSS Navigation Menus. Navigation menus are essential for website navigation, and CSS provides powerful tools to style and customize them. Follow us to learn more!